Examples
These scenarios stay on the primitive layer so you can own the button label, shell layout, and selection summary directly.
Standalone formatting toggles
Multiple-selection formatting actions where each button keeps its own pressed state.
Standalone formatting toggles (Plain-CSS)
Standalone formatting toggles (Tailwind CSS)
Editor tools
Multiple-selection formatting actions where each button keeps its own pressed state.
Active: bold
View mode selector
Single-select groups work well for mutually exclusive layout choices.
View mode selector (Plain-CSS)
View mode
Single-select groups are a good fit for layout pickers.
Selected: list
View mode selector (Tailwind CSS)
View mode
Single-select groups are a good fit for layout pickers.
Selected: grid
Disabled fallback actions
Keep the primary action available while clearly muting the unavailable fallback.
Disabled fallback actions (Plain-CSS)
Disabled fallback actions (Tailwind CSS)
Fallback actions
Keep the primary action available while clearly muting the unavailable fallback.