List Button is intended to be used inside of the List React Component.
There are following components included:
ListButton
Name | Type | Default | Description |
---|---|---|---|
colors | object | Object with Tailwind CSS colors classes | |
colors.activeBg | string | 'active:bg-primary' | List button pressed bg color |
colors.text | string | 'text-primary' | List button text color |
colors.touchRipple | string | 'touch-ripple-primary' | List button touch ripple color |
component | string | 'li' | Component's HTML Element |
hairlines | boolean | true | Renders button outer hairlines (borders) |
href | string | Button's link | |
linkComponent | string | 'a' | Button HTML Element |
linkProps | any | Object with additional props (attributes) to pass to the Link/Button | |
target | string | Button's link | |
touchRipple | boolean | true | Enables touch ripple effect in Material theme |
type | string | undefined | Button's |
value | any | Button's |
import React from 'react';import { Page, Navbar, NavbarBackLink, List, ListButton } from 'konsta/react';export default function ListButtonPage() {return (<Page><Navbartitle="List Button"/><List><ListButton>Button 1</ListButton><ListButton>Button 2</ListButton><ListButton>Button 3</ListButton></List><List inset><ListButton>Button 1</ListButton><ListButton>Button 2</ListButton><ListButton>Button 3</ListButton></List><List inset><ListButtoncolors={{text: 'text-red-500',activeBg: 'active:bg-red-500',touchRipple: 'touch-ripple-red-500',}}>Red Button</ListButton></List></Page>);}