There are following components included:
Button
- single buttonName | Type | Default | Description |
---|---|---|---|
clear | boolean | false | Makes button in clear style (without fill color) |
colors | object | Object with Tailwind CSS colors classes | |
colors.activeBg | string | 'active:bg-primary' | Clicked fill button bg color |
colors.activeBgDark | string | 'active:bg-primary-dark' | Clicked fill button bg color in dark theme |
colors.bg | string | 'bg-primary' | Full button bg color |
colors.border | string | 'border-primary' | Outline button border color |
colors.disabledBg | string | 'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-10' | Disabled state button bg color |
colors.disabledBorder | string | 'border-black border-opacity-10 dark:border-white dark:border-opacity-10' | Disabled state button border color |
colors.disabledText | string | 'text-black text-opacity-30 dark:text-white dark:text-opacity-30' | Disabled state button text color |
colors.text | string | 'text-primary' | Button text color |
colors.touchRipple | string | 'touch-ripple-primary' | Touch ripple color |
component | string | 'button' | Component's HTML Element |
disabled | boolean | false | Makes button disabled |
href | string | Link's | |
inline | boolean | false | Makes button inline (e.g. |
large | boolean | false | Makes button large |
outline | boolean | undefined | Makes button outline |
raised | boolean | false | Makes button raised (with shadow) |
rounded | boolean | false | Makes button rounded |
segmented | boolean | false | Renders segmented button, same as |
segmentedActive | boolean | false | Renders segmented active button, same as |
segmentedStrong | boolean | false | Renders segmented strong button, same as |
small | boolean | false | Makes button small |
touchRipple | boolean | true | Enables touch ripple effect in Material theme |
onClick | function(e) |
|
<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><Buttoncolors={{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><Buttoncolors={{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><Buttoncolors={{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>