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

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.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'
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 className="k-color-brand-red">Red Button</ListButton>
</List>
</Page>
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.