Skip to content

ComponentsButtonGroup

Components

ButtonGroup

Joined groups (squared seams that hide next to a hovered segment), spaced groups, and the SplitButton: a primary action with a caret menu anchored to the whole group.

Joined

The default. Inner corners are squared and the children paint flat (v2: no ring or drop on secondary). A seam (1px of the segments' fill + a line over the middle 50%) sits between segments and hides next to a hovered, open or pressed one.

light
dark
Sizes
Variants, vertical, manual separator
Date stepper (ButtonGroupText)
Oct 2026

Spaced

Separate buttons 8px apart (6 compact). Children without a variant take the group's buttonVariant.

Spaced

SplitButton

A primary action plus a caret menu. The menu is anchored to the whole group (bottom / end, 6px). Ghost: two separate r8 halves; hovering either half (or an open menu) paints both, and the hovered half or the open caret adds one layer. v2 caret: a 14px segment (padding 0 1px, a 16px chevron in a 12px box, secondary ink), so the Dictate split is 28 + 1 + 1 + 14 = 44.

light
dark
Ghost icon-only (composer Dictate)
pressed: false
Secondary, primary, sizes, disabled, busy
menu open: false