source

Button Group

Group related buttons with single/multi selection, orientation options, and connected styling.

Orientation

Variant

Tier

Selection

Connected

Disabled

Intent

Size

Loading syntax highlighting...

01 Examples

Single Selection

Loading syntax highlighting...

Multiple Selection

Loading syntax highlighting...

Variants

Each variant rendered with selection='single' so the active state is visible — adjacent filled buttons now show a hairline divider, ghost-active picks up a subtle ring + bold weight, outlined fills the active button.

Loading syntax highlighting...

Disconnected

Loading syntax highlighting...

Vertical

Loading syntax highlighting...

Sizes

Loading syntax highlighting...

02 Accessibility

ARIA

Single-selection groups use role="radiogroup" with role="radio" + aria-checked on each button. Multiple-selection groups use role="group" with role="checkbox" + aria-checked. Provide ariaLabel when the group's purpose is not clear from context.

Keyboard

Tab moves focus between buttons. Enter / Space toggles selection.

Prop Inheritance

size, intent, variant, disabled, and mint propagate to child Buttons via context. A Button can override any inherited value by setting the prop directly.

03 API Reference

19 props

No matching properties

No matching properties

04 Installation

Import

Loading syntax highlighting...

llm.txt