ButtonGroup

Combines related buttons into a single visual unit. Also composes with Input, Select, and DropdownMenu; dividers defaults on for the segmented variant.

Usage

import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants } from "@desk/ui/components/button-group";

Best practices

Use ButtonGroup to visually join related Buttons (plus Input/Select/DropdownMenu); for one/many *selection* state reach for ToggleGroup.
The segmented variant owns the border/background/shadow and defaults dividers on, while joined (default) lets each child draw its own — don't mix the two.

Props

ButtonGroup

Prop	Type	Default	Description
variant	`"segmented" \| "joined" \| null \| undefined`
orientation	`"horizontal" \| "vertical" \| null \| undefined`
radius	`"rounded" \| "square" \| "full" \| null \| undefined`
dividers	`boolean \| null \| undefined`

ButtonGroupSeparator

Prop	Type	Default	Description
variant	`"strong" \| "default" \| "muted" \| "accent"`	`"default"`	Visual weight of the separator line.

ButtonGroupText

Prop	Type	Default	Description
asChild	`boolean`

Also exports

constbuttonGroupVariants

Composition

Builds on

Separator

Used by

QuantityControl