| State |
Visual change |
Tokens |
| Default |
tertiary: no fill and no border; secondary: a border |
color-border-default |
| Hover |
The background darkens one step |
color-action-subtle-hovered |
| Held down |
The background darkens one more step and the box scales to 0.97 |
color-action-subtle-pressed, motion-press-scale |
Pressed (data-pressed) |
Selected fill and selected border together |
color-surface-selected, color-border-selected |
| Focus |
2 px outer focus ring with a 2 px gap |
color-focus-ring, border-width-focus |
| Disabled |
Faded text, not-allowed cursor |
color-text-disabled |
| Size |
Height and minimum width |
Inline padding |
Icon |
sm |
32 px (button-height-sm) |
button-padding-inline-sm; 0 when icon-only |
16 px |
md |
36 px (button-height-md) |
button-padding-inline-md; 0 when icon-only |
16 px |
lg |
40 px (button-height-lg) |
button-padding-inline-lg; 0 when icon-only |
20 px |
Corner radius button-radius (10 px); gap between icon and text space-sm (6 px).
Values are shown for the selected brand; change the brand from the top bar.
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-color-surface-selected | | #edf5f8#ededed#ededed | #092932#404040#404040 |
--bigbang-color-border-selected | | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 |
--bigbang-color-border-default | | #e5e5e5#e5e5e5#e5e5e5 | #404040#404040#404040 |
--bigbang-color-action-subtle-hovered | | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 |
--bigbang-color-action-subtle-pressed | | #ededed#ededed#ededed | #404040#404040#404040 |
--bigbang-color-text-disabled | | #a1a1a1#a1a1a1#a1a1a1 | #525252#525252#525252 |
--bigbang-button-height-md | | 36px36px36px | 36px36px36px |
--bigbang-button-radius | | 10px10px10px | 10px10px10px |
--bigbang-color-focus-ring | | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
| Interaction |
Property |
Duration token |
Easing token |
Reduced motion |
| Press |
scale 1 → 0.97 (motion.press) |
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 at 1; only the colour changes. |
| Hover, change to pressed |
background-color, border-color, color |
motion-hover-duration (110 ms) |
motion-hover-easing |
Unchanged; it is a colour transition only. |
| Focus |
The focus ring appears at once, without a transition |
None |
None |
Unchanged. |
See Motion for the values.