🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥

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.activeBgIosstring'active:bg-primary active:bg-opacity-15'
colors.activeBgMaterialstring''
colors.textIosstring'text-primary'
colors.textMaterialstring'text-md-light-primary dark:text-md-dark-primary'
colors.touchRipplestring'touch-ripple-primary'
componentstring'li'

Component's HTML Element

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 '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>
);
}
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.