Scale — Button Group

Install

Examples

Default

Wrap related Buttons and give the group a label for its accessible name.

Save

Duplicate

Delete

Selectable

selectable plus a value turns the group into a single-select segmented control — the child matching value renders as primary and the group fires a change event.

24h

30d

90d

All

Orientation

Set orientation="vertical" to stack the buttons into a column.

Profile

Settings

Sign out

Gap

Tighten or loosen the spacing between buttons with gap — xs, s, m (default), or l.

One

Two

Three

Guidelines

Usage

form action rows, toolbars, and segmented filters — any time a set of buttons act on the same context. Add selectable to make it a radio-like single-select.

Do

Group buttons that act on the same object or context.
Keep one primary action per group; let the rest carry lower emphasis.
Use selectable when the buttons are mutually exclusive options.

Don’t

Don’t mix unrelated actions into one group just to align them.
Don’t use a selectable group for multi-select — reach for checkboxes instead.
Don’t leave the group without a label for assistive tech.

Accessibility

Role: renders role="group", or role="radiogroup" when selectable — with the children exposed as radios.
Name: the label becomes the group’s aria-label; always set it.
Orientation: aria-orientation follows the orientation prop so screen readers announce the layout.
Selection: the active child carries aria-checked="true"; the rest are false.
Focus: each button keeps its own keyboard focus ring.

Properties

Button — the individual actions inside a group.
Button Pill — pill toggles for selectable groups.
Button Icon — icon-only actions in dense toolbars.

Button Group