Button
A button with variants, sizes, and optional link rendering via href.
Loading preview…
1<script lang="ts">
2 import { Button, BUTTON_VARIANTS } from "$registry/items/components/button";
3</script>
4
5<div class="flex flex-wrap items-center gap-2">
6 {#each BUTTON_VARIANTS as variant (variant)}
7 <Button {variant} class="capitalize">{variant}</Button>
8 {/each}
9</div>
10Installation
1. Install dependencies
2. Copy these files into your project
- ~/components/button/index.ts
- ~/components/button/button.svelte
- ~/components/button/button.types.ts
- ~/components/button/button.variants.ts
Usage
Use the button for primary actions, secondary actions, links, and icon-only controls. Pass href to
render as an anchor, or set newTab to open the link in a new tab.
1<script lang="ts">
2 import { Button } from '~/components/button';
3</script>
4
5<div class="flex items-center gap-3">
6 <Button variant="default">Save</Button>
7 <Button variant="outline">Cancel</Button>
8 <Button href="/docs" variant="ghost">Docs</Button>
9</div>