Button Group

Combines multiple nested Buttons together into a single fluid Segmented Bar. The root capsule acts as a unified magnetic drag frame and specular gloss glare boundary.

Preview

Active Interval: week

Configuration

Capsule Variant

Capsule Size

Magnetic Cursor Pull Pulls entire capsule towards pointer gravity

Haptic Press Scale Squeezes segmented capsule on active clicks

Specular Highlight Glare Rotates shiny border glare overlays

Installation

npx shadcn-svelte@latest add https://ui.grgurevic.click/r/button-group.json

Svelte Composition Code

<script lang="ts">
	import * as ButtonGroup from "$lib/components/ui/button-group";
	import { Button } from "$lib/components/ui/button";
	let activeSegment = $state("week");
</script>

<ButtonGroup.Root>
	<Button onclick={() => activeSegment = "year"} class={activeSegment === "year" ? "bg-foreground/10" : ""}>Year</Button>
	<Button onclick={() => activeSegment = "month"} class={activeSegment === "month" ? "bg-foreground/10" : ""}>Month</Button>
	<Button onclick={() => activeSegment = "week"} class={activeSegment === "week" ? "bg-foreground/10" : ""}>Week</Button>
</ButtonGroup.Root>

API & Props Reference

Prop	Type	Default	Description
variant	"prominent" \| "bordered" \| "secondary" \| "translucent" \| "ghost" \| "destructive"	"translucent"	Capsule backdrop/outline styling.
size	"xs" \| "sm" \| "default" \| "lg"	"default"	Tuning heights and internal child spacing gaps.
magnetic	boolean	true	Activates spring drag gravity forces on pointer.
scale	boolean	true	Allows elastic container compression on mouse presses.
specular	boolean	true	Appends dynamic 3D glossy highlight glare lines.