Toggle Group
A set of two-state buttons that can be toggled on or off.
Loading preview…
1<script lang="ts">
2 import BookmarkIcon from '@lucide/svelte/icons/bookmark';
3 import HeartIcon from '@lucide/svelte/icons/heart';
4 import StarIcon from '@lucide/svelte/icons/star';
5 import * as ToggleGroup from './index.js';
6</script>
7
8<ToggleGroup.Root type="multiple" variant="outline" spacing={2} size="sm">
9 <ToggleGroup.Item
10 value="star"
11 aria-label="Toggle star"
12 class="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-yellow-500 data-[state=on]:*:[svg]:stroke-yellow-500"
13 >
14 <StarIcon />
15 Star
16 </ToggleGroup.Item>
17 <ToggleGroup.Item
18 value="heart"
19 aria-label="Toggle heart"
20 class="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-red-500 data-[state=on]:*:[svg]:stroke-red-500"
21 >
22 <HeartIcon />
23 Heart
24 </ToggleGroup.Item>
25 <ToggleGroup.Item
26 value="bookmark"
27 aria-label="Toggle bookmark"
28 class="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-blue-500 data-[state=on]:*:[svg]:stroke-blue-500"
29 >
30 <BookmarkIcon />
31 Bookmark
32 </ToggleGroup.Item>
33</ToggleGroup.Root>
34Installation
1. Install dependencies
2. Copy these files into your project
- ~/components/toggle-group/index.ts
- ~/components/toggle-group/toggle-group.svelte
- ~/components/toggle-group/toggle-group-item.svelte
Usage
Use toggle group for mutually exclusive or multi-select icon/toolbars. Set type="single" or type="multiple". Pass variant, size, and optional spacing on the root to style all items.
1<script lang="ts">
2 import BoldIcon from '@lucide/svelte/icons/bold';
3 import ItalicIcon from '@lucide/svelte/icons/italic';
4 import * as ToggleGroup from '~/components/toggle-group';
5</script>
6
7<ToggleGroup.Root type="single">
8 <ToggleGroup.Item value="bold" aria-label="Toggle bold">
9 <BoldIcon />
10 </ToggleGroup.Item>
11 <ToggleGroup.Item value="italic" aria-label="Toggle italic">
12 <ItalicIcon />
13 </ToggleGroup.Item>
14</ToggleGroup.Root>