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 "@instruments/materia-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
orientation	`"horizontal" \| "vertical" \| null \| undefined`
variant	`"segmented" \| "joined" \| 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.

Also exports

componentButtonGroupText
constbuttonGroupVariants

Composition

Builds on

Separator

Used by

QuantityControl