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>