Button Group
A container that groups related buttons together with consistent styling.
Loading preview…
1<script lang="ts">
2 import * as ButtonGroup from './index.js';
3 import Button from '../button/button.svelte';
4</script>
5
6<div class="flex flex-col gap-4">
7 <ButtonGroup.Root aria-label="Actions">
8 <Button variant="outline">Archive</Button>
9 <Button variant="outline">Report</Button>
10 <Button variant="outline">Snooze</Button>
11 </ButtonGroup.Root>
12
13 <ButtonGroup.Root>
14 <Button variant="secondary" size="sm">Copy</Button>
15 <ButtonGroup.Separator />
16 <Button variant="secondary" size="sm">Paste</Button>
17 </ButtonGroup.Root>
18</div>
19Installation
1. Install dependencies
2. Copy these files into your project
- ~/components/button-group/index.ts
- ~/components/button-group/button-group.svelte
- ~/components/button-group/button-group.variants.ts
- ~/components/button-group/button-group-text.svelte
- ~/components/button-group/button-group-separator.svelte
Usage
Use button group to cluster related actions. Set orientation to horizontal or vertical.
Pair with ButtonGroup.Separator for non-outline button variants.
1<script lang="ts">
2 import * as ButtonGroup from '~/components/button-group';
3 import { Button } from '~/components/button';
4</script>
5
6<ButtonGroup.Root aria-label="Actions">
7 <Button variant="outline">Archive</Button>
8 <Button variant="secondary">Report</Button>
9 <Button>Snooze</Button>
10</ButtonGroup.Root>