ButtonGroup

Preview

svelte

<script lang="ts">
	import { Button } from "fancy-ui-svelte";
	import { ButtonGroup } from "fancy-ui-svelte";
</script>

<ButtonGroup label="Clipboard actions">
	<Button variant="outline">Cut</Button>
	<Button variant="outline">Copy</Button>
	<Button variant="outline">Paste</Button>
</ButtonGroup>

Installation

pnpm add fancy-ui-svelte

import { ButtonGroup } from 'fancy-ui-svelte'

Usage

svelte

<script lang="ts">
  import { ButtonGroup } from 'fancy-ui-svelte';
</script>

<ButtonGroup />

Examples

Basic Usage

svelte

<script lang="ts">
	import { Button } from "$lib/fancy-ui/button";
	import { ButtonGroup } from "$lib/fancy-ui/button-group";
</script>

<ButtonGroup label="Clipboard actions">
	<Button variant="outline">Cut</Button>
	<Button variant="outline">Copy</Button>
	<Button variant="outline">Paste</Button>
</ButtonGroup>

Segmented Control

A Day / Week / Month picker; the active item is the demo's own state, not ButtonGroup's.

svelte

<script lang="ts">
	import { Button } from "$lib/fancy-ui/button";
	import { ButtonGroup } from "$lib/fancy-ui/button-group";

	const ranges = ["Day", "Week", "Month"];
	let active = $state("Day");
</script>

<ButtonGroup label="Time range">
	{#each ranges as range (range)}
		<Button variant={range === active ? "secondary" : "ghost"} onclick={() => (active = range)}>
			{range}
		</Button>
	{/each}
</ButtonGroup>

Split Button

A wide primary action and a narrow trailing trigger, joined by the same seam.

svelte

<script lang="ts">
	import { Button } from "$lib/fancy-ui/button";
	import { ButtonGroup } from "$lib/fancy-ui/button-group";
</script>

<ButtonGroup label="Save document">
	<Button variant="secondary">Save</Button>
	<Button variant="secondary" class="px-[10px]" label="More save options">▼</Button>
</ButtonGroup>

Vertical

orientation="vertical" stacks the items and rotates the divider onto the same axis.

svelte

<script lang="ts">
	import { Button } from "$lib/fancy-ui/button";
	import { ButtonGroup } from "$lib/fancy-ui/button-group";
</script>

<ButtonGroup orientation="vertical" label="Panel position">
	<Button variant="outline">Top</Button>
	<Button variant="outline">Middle</Button>
	<Button variant="outline">Bottom</Button>
</ButtonGroup>

Props

Prop	Type	Default	Description
`orientation`	"horizontal" \| "vertical"	`"horizontal"`	Stacking axis for the joined items
`label`	string	-	Accessible name for the group, exposed as aria-label
`class`	string	-	Additional CSS classes
`ref`	HTMLDivElement \| null	`null`	Bindable reference to the root <div>