Button
A clickable interactive element with the lily click-scale feel.
<script lang="ts">
import { Button } from "$lib/components/ui/button";
</script>
<div class="flex flex-wrap items-center gap-3">
<Button>Default</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>
</div>Installation
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest initCopy the button source from the registry into $lib/components/ui/button.
Usage
<script lang="ts">
import { Button } from '$lib/components/ui/button';
</script>
<Button>Click me</Button>Variants
<Button>Default</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>Sizes
<Button size="sm">Small</Button>
<Button>Default</Button>
<Button size="lg">Large</Button>
<Button size="icon" aria-label="Settings">⚙</Button>Link
A Button renders as an <a> when you pass an href.
<Button href="/docs">Documentation</Button>