ButtonGroup has no interaction states of its own; the states come from the buttons.
| State |
Visual change |
Tokens |
| Default |
6 px gap between buttons |
space-sm |
| Attached |
No gap, square inner corners, borders overlap by 1 px |
border-width-default |
| Focus (attached) |
The focused button comes to the front; its ring shows in full |
color-focus-ring |
| Property |
Value |
Token |
| Gap in a spaced group |
6 px |
space-sm |
| Overlap in an attached group |
1 px |
border-width-default |
| Gap between nested groups |
8 px |
space-md |
ButtonGroup.Text |
Sunken fill, default border, 12 px inline padding, label-md |
color-surface-sunken, color-border-default, space-lg |
ButtonGroup.Separator |
1 px line, inset 1 px from the group edges |
color-border-default |
| Outer corners |
The button radius (10 px) |
button-radius |
| Width |
Fits its content (w-fit) |
- |
Values are shown for the selected brand; change the brand from the top bar.
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-space-sm | | 6px6px6px | 6px6px6px |
--bigbang-space-md | | 8px8px8px | 8px8px8px |
--bigbang-border-width-default | | 1px1px1px | 1px1px1px |
--bigbang-button-radius | | 10px10px10px | 10px10px10px |
--bigbang-color-surface-sunken | | #f5f5f5#f5f5f5#f5f5f5 | #171717#171717#171717 |
--bigbang-color-border-default | | #e5e5e5#e5e5e5#e5e5e5 | #404040#404040#404040 |
--bigbang-color-focus-ring | | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
| Interaction |
Motion |
Reduced motion |
| Hover, press, focus |
ButtonGroup has no motion of its own; each button presses with motion.press |
The Button rule applies: scale stays at 1 |
| Enter and exit |
None |
Not applicable |
See the Button specs tab for the button motion values.