List Button Svelte Component

List Button is intended to be used inside of the List Svelte 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

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')

onClickfunction(e)

click event handler

Examples

ListButton.svelte
<script>
import {
Page,
Navbar,
NavbarBackLink,
List,
ListButton,
} from 'konsta/svelte';
</script>
<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 © Konsta UI by nolimits4web.