List Button

ListButton Props

Name	Type	Default	Description
colors	object		Object with Tailwind CSS colors classes
colors.activeBgIos	string	'active:bg-primary active:bg-opacity-15'
colors.activeBgMaterial	string	''
colors.textIos	string	'text-primary'
colors.textMaterial	string	'text-md-light-primary dark:text-md-dark-primary'
colors.touchRipple	string	'touch-ripple-primary'
component	string	'li'	Component's HTML Element
href	string		Button's link href attribute
linkComponent	string	'a'	Button HTML Element
linkProps	any		Object with additional props (attributes) to pass to the Link/Button
target	string		Button's link target attribute
touchRipple	boolean	true	Enables touch ripple effect in Material theme
type	string	undefined	Button's type attribute (if rendered as <button> with linkComponent: 'button')
value	any		Button's type attribute (if rendered as <button> with linkComponent: 'button')

Examples

Vue

<template>
  <i-page>
    <i-navbar title="List Button" />

    <i-list>
      <i-list-button>Button 1</i-list-button>
      <i-list-button>Button 2</i-list-button>
      <i-list-button>Button 3</i-list-button>
    </i-list>

    <i-list inset>
      <i-list-button>Button 1</i-list-button>
      <i-list-button>Button 2</i-list-button>
      <i-list-button>Button 3</i-list-button>
    </i-list>
    <i-list inset>
      <i-list-button class="k-color-brand-red"> Red Button </i-list-button>
    </i-list>
  </i-page>
</template>
<script>
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iList,
    iListButton,
  } from 'ina-ui/vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iList,
      iListButton,
    },

  };
</script>

React

import React from 'react';
import { Page, Navbar, NavbarBackLink, List, ListButton } from 'ina-ui/react';

export default function ListButtonPage() {
  return (
    <Page>
      <Navbar
        title="List Button"
        />

      <List strong outlineIos>
        <ListButton>Button 1</ListButton>
        <ListButton>Button 2</ListButton>
        <ListButton>Button 3</ListButton>
      </List>

      <List inset strong>
        <ListButton>Button 1</ListButton>
        <ListButton>Button 2</ListButton>
        <ListButton>Button 3</ListButton>
      </List>
      <List inset strong>
        <ListButton className="k-color-brand-red">Red Button</ListButton>
      </List>
    </Page>
  );
}