Toggle
A two-state button that can be either on or off.
Loading preview…
1<script lang="ts">
2 import BookmarkIcon from '@lucide/svelte/icons/bookmark';
3 import { Toggle } from './index.js';
4</script>
5
6<Toggle
7 aria-label="Toggle bookmark"
8 size="sm"
9 variant="outline"
10 class="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-blue-500 data-[state=on]:*:[svg]:stroke-blue-500"
11>
12 <BookmarkIcon />
13 Bookmark
14</Toggle>
15Installation
1. Install dependencies
2. Copy these files into your project
- ~/components/toggle/index.ts
- ~/components/toggle/toggle.svelte
- ~/components/toggle/toggle.variants.ts
Usage
Use toggle for on/off controls like formatting buttons. Bind pressed; choose variant (default | outline)
and size (sm | default | lg).
1<script lang="ts">
2 import BookmarkIcon from '@lucide/svelte/icons/bookmark';
3 import { Toggle } from '~/components/toggle';
4</script>
5
6<Toggle
7 aria-label="Toggle bookmark"
8 size="sm"
9 variant="outline"
10 class="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-blue-500 data-[state=on]:*:[svg]:stroke-blue-500"
11>
12 <BookmarkIcon />
13 Bookmark
14</Toggle>