List Button React Component

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

List Button Components

There are following components included:

  • ListButton

ListButton Props

NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.activeBgstring'active:bg-primary'

List button pressed bg color

colors.textstring'text-primary'

List button text color

colors.touchRipplestring'touch-ripple-primary'

List button touch ripple color

componentstring'li'

Component's HTML Element

hairlinesbooleantrue

Renders button outer hairlines (borders)

hrefstring

Button's link href attribute

linkComponentstring'a'

Button HTML Element

linkPropsany

Object with additional props (attributes) to pass to the Link/Button

targetstring

Button's link target attribute

touchRipplebooleantrue

Enables touch ripple effect in Material theme

typestringundefined

Button's type attribute (if rendered as <button> with linkComponent: 'button')

valueany

Button's type attribute (if rendered as <button> with linkComponent: 'button')

Examples

ListButton.jsx
import React from 'react';
import {
Page,
Navbar,
NavbarBackLink,
List,
ListButton,
} from 'tailwind-mobile/react';
export default function ListButtonPage() {
return (
<Page>
<Navbar
title="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>
<ListButton
colors={{
text: 'text-red-500',
activeBg: 'active:bg-red-500',
touchRipple: 'touch-ripple-red-500',
}}
>
Red Button
</ListButton>
</List>
</Page>
);
}
Code licensed under MIT.
2021 © Tailwind Mobile by nolimits4web.