Buttons won't work without JavaScript, links will though.
Buttons
A clickable element that triggers an action on press.
Sizes
<Button size="xl" class="w-max">X Large</Button>
<Button size="lg" class="w-max">Large</Button>
<Button size="md" class="w-max">Medium</Button>
<Button size="sm" class="w-max">Small</Button>
Types
<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="tertiary">Tertiary</Button>
<Button color="elevated">Elevated</Button>
<Button color="danger">Danger</Button>
<Button disabled>Disabled</Button>
<Button color="none">None</Button>
Links
A button can become a link if you add href
.
<Button on:click={() => alert('button')}>Button</Button>
<Button href="#buttons">Link</Button>
Roundness
<Button rounding="pill">Full</Button>
<Button rounding="lg">Large</Button>
<Button rounding="md">Medium</Button>
<Button rounding="none">None</Button>
Rounding side
<Button rounding="md" roundingSide="left">Left</Button>
<Button rounding="md" roundingSide="right">Right</Button>
<Button rounding="md" roundingSide="top">Top</Button>
<Button rounding="md" roundingSide="bottom">Bottom</Button>
<Button rounding="md" roundingSide="all">All</Button>
Squares
Adding -square
to the end of a size
will make it square.
<Button size="square-xl">xl</Button>
<Button size="square-lg">lg</Button>
<Button size="square-md">md</Button>
<Button size="square-sm">sm</Button>
Alignments
<Button alignment="left" class="w-36">Left</Button>
<Button alignment="center" class="w-36">Center</Button>
<Button alignment="right" class="w-36">Right</Button>
Prefix/Suffix
There is a slot
for suffixes/prefixes.
<Button>
<span slot="prefix">�</span>
Prefix
</Button>
<Button>
<span slot="suffix">�</span>
Suffix
</Button>