Toggle
A two-state button that can be on or off.
<script lang="ts">
import { Toggle } from "$lib/components/ui/toggle";
</script>
<Toggle aria-label="Toggle bold">
<!-- heroicons-ish: bold -->
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M6 4h7a4 4 0 0 1 0 8H6zM6 12h8a4 4 0 0 1 0 8H6z" />
</svg>
Bold
</Toggle>Installation
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest initCopy the toggle source from the registry into $lib/components/ui/toggle.
Usage
<script lang="ts">
import { Toggle } from '$lib/components/ui/toggle';
let pressed = $state(false);
</script>
<Toggle bind:pressed>Bold</Toggle>