List Button React Component

List Button is intended to be used inside of the List React Component.

List Button Components
ListButton Props
Examples

List Button Components

There are following components included:

ListButton

ListButton Props

Name	Type	Default	Description
colors	object		Object with Tailwind CSS colors classes
colors.bgIos	string	'active:bg-primary/15'
colors.bgMaterial	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
linkComponent	string	'a'	Button HTML Element
linkProps	any		Object with additional props (attributes) to pass to the Link/Button
target	string		Button's link
type	string	undefined	Button's
value	any		Button's

Examples

ListButton.jsx

import React from 'react';
import { Page, Navbar, NavbarBackLink, List, ListButton } from 'konsta/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>
  );
}

List Button React Component

Contents

List Button Components

ListButton Props

Examples