| State |
Visual change |
Tokens |
| Default |
Raised container, transparent buttons |
color-surface-raised, color-border-subtle |
| Hover |
Light fill on the button |
color-action-subtle-hovered |
| Pressed (moment) |
The button scales to 0.97 |
motion-press-scale |
On (pressed) |
Selected fill and strong text |
color-surface-selected, color-text-default |
| Focus |
2 px outer focus ring |
color-focus-ring, border-width-focus |
| Disabled |
Dimmed button, not-allowed cursor |
color-action-disabled-default |
| Size |
Container height |
Button height |
sm |
32 px (button-height-sm) |
26 px |
md |
36 px (button-height-md) |
30 px |
The container padding and the gap between buttons are 2 px (space-xxs); the border is 1 px and the corner radius radius-lg (10 px). The container is as tall as an input or button of the same size; the buttons inside are shorter by the container padding and border. The separator is 1 px thick. Icon-only buttons are square.
Values follow the selected brand; change the brand from the top bar.
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-color-surface-raised | | #ffffff#ffffff#ffffff | #262626#262626#262626 |
--bigbang-color-border-subtle | | #ededed#ededed#ededed | #303030#303030#303030 |
--bigbang-color-surface-selected | | #edf5f8#ededed#ededed | #092932#404040#404040 |
--bigbang-color-action-subtle-hovered | | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 |
--bigbang-color-text-default | | #171717#171717#171717 | #fafafa#fafafa#fafafa |
--bigbang-color-focus-ring | | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
--bigbang-button-height-sm | | 32px32px32px | 32px32px32px |
--bigbang-button-height-md | | 36px36px36px | 36px36px36px |
--bigbang-button-radius | | 10px10px10px | 10px10px10px |
--bigbang-radius-md | | 8px8px8px | 8px8px8px |
| Interaction |
Property |
Duration token |
Easing token |
Reduced motion |
| Press |
scale 1 → 0.97 |
motion-press-duration (70 ms) on press, motion-release-duration (230 ms) on release |
motion-press-easing; easing-spring-productive-fast on release |
Scale stays 1. |
| Toggle and hover |
background-color, color |
motion-hover-duration (110 ms) |
motion-hover-easing |
Unchanged; it is a colour change. |
See Motion for the values.