Button Svelte Component

Button Components

There are following components included:

  • Button - single button

Button Props

NameTypeDefaultDescription
clearbooleanfalse

Makes button in clear style (without fill color)

colorsobject

Object with Tailwind CSS colors classes

colors.activeBgstring'active:bg-primary'

Clicked fill button bg color

colors.activeBgDarkstring'active:bg-primary-dark'

Clicked fill button bg color in dark theme

colors.bgstring'bg-primary'

Full button bg color

colors.borderstring'border-primary'

Outline button border color

colors.disabledBgstring'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-10'

Disabled state button bg color

colors.disabledBorderstring'border-black border-opacity-10 dark:border-white dark:border-opacity-10'

Disabled state button border color

colors.disabledTextstring'text-black text-opacity-30 dark:text-white dark:text-opacity-30'

Disabled state button text color

colors.textstring'text-primary'

Button text color

colors.touchRipplestring'touch-ripple-primary'

Touch ripple color

componentstring'button'

Component's HTML Element

disabledbooleanfalse

Makes button disabled

hrefstring

Link's href attribute, when specified will also be rendered as <a> element

inlinebooleanfalse

Makes button inline (e.g. display: inline-flex)

largebooleanfalse

Makes button large

outlinebooleanundefined

Makes button outline

raisedbooleanfalse

Makes button raised (with shadow)

roundedbooleanfalse

Makes button rounded

segmentedbooleanfalse

Renders segmented button, same as <SegmentedButton>

segmentedActivebooleanfalse

Renders segmented active button, same as <SegmentedButton active>

segmentedStrongbooleanfalse

Renders segmented strong button, same as <SegmentedButton strong>

smallbooleanfalse

Makes button small

touchRipplebooleantrue

Enables touch ripple effect in Material theme

onClickfunction(e)

click event handler

Examples

Buttons.svelte
<script>
import {
Page,
Navbar,
NavbarBackLink,
Button,
Block,
BlockTitle,
} from 'konsta/svelte';
</script>
<Page>
<Navbar title="Buttons" />
<BlockTitle>Default Buttons</BlockTitle>
<Block strong class="space-y-2">
<div class="grid grid-cols-3 gap-x-4">
<Button>Button</Button>
<Button
colors={{
text: 'text-red-500',
border: 'border-red-500',
bg: 'bg-red-500',
activeBg: 'active:bg-red-500',
activeBgDark: 'active:bg-red-600',
}}
>
Button
</Button>
<Button>Button</Button>
</div>
<div class="grid grid-cols-3 gap-x-4">
<Button outline>Outline</Button>
<Button
colors={{
text: 'text-red-500',
border: 'border-red-500',
bg: 'bg-red-500',
activeBg: 'active:bg-red-500',
activeBgDark: 'active:bg-red-600',
touchRipple: 'touch-ripple-red-500',
}}
outline
>
Outline
</Button>
<Button outline>Outline</Button>
</div>
<div class="grid grid-cols-3 gap-x-4">
<Button clear>Clear</Button>
<Button
colors={{
text: 'text-red-500',
border: 'border-red-500',
bg: 'bg-red-500',
activeBg: 'active:bg-red-500',
activeBgDark: 'active:bg-red-600',
touchRipple: 'touch-ripple-red-500',
}}
clear
>
Clear
</Button>
<Button clear>Clear</Button>
</div>
</Block>
<BlockTitle>Rounded Buttons</BlockTitle>
<Block strong class="space-y-2">
<div class="grid grid-cols-3 gap-x-4">
<Button rounded>Button</Button>
<Button rounded>Button</Button>
<Button rounded>Button</Button>
</div>
<div class="grid grid-cols-3 gap-x-4">
<Button rounded outline>Outline</Button>
<Button rounded outline>Outline</Button>
<Button rounded outline>Outline</Button>
</div>
<div class="grid grid-cols-3 gap-x-4">
<Button rounded clear>Clear</Button>
<Button rounded clear>Clear</Button>
<Button rounded clear>Clear</Button>
</div>
</Block>
<BlockTitle>Large Buttons</BlockTitle>
<Block strong class="space-y-2">
<div class="grid grid-cols-3 gap-x-4">
<Button large>Button</Button>
<Button large>Button</Button>
<Button large rounded>Button</Button>
</div>
<div class="grid grid-cols-3 gap-x-4">
<Button large outline>Outline</Button>
<Button large outline>Outline</Button>
<Button large rounded outline>Outline</Button>
</div>
<div class="grid grid-cols-3 gap-x-4">
<Button large clear>Clear</Button>
<Button large clear>Clear</Button>
<Button large rounded clear>Clear</Button>
</div>
</Block>
<BlockTitle>Small Buttons</BlockTitle>
<Block strong class="space-y-2">
<div class="grid grid-cols-3 gap-x-4">
<Button small>Button</Button>
<Button small>Button</Button>
<Button small rounded>Button</Button>
</div>
<div class="grid grid-cols-3 gap-x-4">
<Button small outline>Outline</Button>
<Button small outline>Outline</Button>
<Button small rounded outline>Outline</Button>
</div>
<div class="grid grid-cols-3 gap-x-4">
<Button small clear>Clear</Button>
<Button small clear>Clear</Button>
<Button small rounded clear>Clear</Button>
</div>
</Block>
<BlockTitle>Raised Buttons</BlockTitle>
<Block strong class="space-y-2">
<div class="grid grid-cols-3 gap-x-4">
<Button raised>Button</Button>
<Button raised>Button</Button>
<Button raised rounded>Button</Button>
</div>
<div class="grid grid-cols-3 gap-x-4">
<Button raised outline>Outline</Button>
<Button raised outline>Outline</Button>
<Button raised rounded outline>Outline</Button>
</div>
<div class="grid grid-cols-3 gap-x-4">
<Button raised clear>Clear</Button>
<Button raised clear>Clear</Button>
<Button raised rounded clear>Clear</Button>
</div>
</Block>
<BlockTitle>Disabled Buttons</BlockTitle>
<Block strong class="space-y-2">
<div class="grid grid-cols-3 gap-x-4">
<Button disabled>Button</Button>
<Button disabled outline>Outline</Button>
<Button disabled clear>Clear</Button>
</div>
</Block>
</Page>
Code licensed under MIT.
2021 © Konsta UI by nolimits4web.