Item states match Toggle; see the Toggle specs tab.
| State |
Visual change |
Tokens |
| Default |
8 px gap between items |
space-md |
| Pressed item |
Selected fill and border |
color-surface-selected, color-border-selected |
| Focused item |
2 px focus ring; the item comes to the front |
color-focus-ring |
| Disabled |
Every item faded |
color-text-disabled |
| Property |
Value |
Token |
| Gap between items |
8 px |
space-md |
| Item height |
32, 36 or 40 px (size) |
button-height-* |
| 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-md | | 8px8px8px | 8px8px8px |
--bigbang-color-surface-selected | | #edf5f8#ededed#ededed | #092932#404040#404040 |
--bigbang-color-border-selected | | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 |
--bigbang-button-height-md | | 36px36px36px | 36px36px36px |
--bigbang-color-focus-ring | | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
| Interaction |
Motion |
Reduced motion |
| Press and change to pressed |
Each item uses the Toggle motion.press: 70 ms press, 230 ms release, colours in 110 ms |
Scale stays at 1; only the colour changes |
| Focus moving with arrow keys |
No transition; the ring appears on the new item at once |
Unchanged |
The group has no motion of its own. See Motion for the values.