States
Section titled “States”| State | Visual change | Tokens |
|---|---|---|
| Default | tertiary: no fill and no border |
The variant’s tokens |
| Hover | The background darkens one step | color-action-subtle-hovered (tertiary) |
| Pressed | The background darkens one more step and the box scales to 0.97 | color-action-subtle-pressed, motion-press-scale |
| Focus | 2 px outer focus ring with a 2 px gap | color-focus-ring, border-width-focus |
| Disabled | Grey fill, faded icon, not-allowed cursor |
color-action-disabled-default, color-action-on-disabled-default |
| Loading | The icon turns invisible and a spinner turns in the centre | The variant’s own tokens |
The other variant and tone colours match Button; see the Button specs tab.
Measurements
Section titled “Measurements”| Size | Box | Icon | Tokens |
|---|---|---|---|
sm |
32 × 32 px | 16 px | button-height-sm, button-icon-size-sm |
md |
36 × 36 px | 16 px | button-height-md, button-icon-size-md |
lg |
40 × 40 px | 20 px | button-height-lg, button-icon-size-lg |
Inline padding is 0; the icon sits in the centre of the box. The corner radius is button-radius (10 px), fully round with circle.
xs is a 24 × 24 px square (button-height-xs) with a 12 px icon, for dense table cells.
Tokens
Section titled “Tokens”Values are shown for the selected brand; change the brand from the top bar.
| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--bigbang-button-height-sm | 32px32px32px | 32px32px32px | |
--bigbang-button-height-md | 36px36px36px | 36px36px36px | |
--bigbang-button-height-lg | 40px40px40px | 40px40px40px | |
--bigbang-button-icon-size-sm | 16px16px16px | 16px16px16px | |
--bigbang-button-icon-size-md | 16px16px16px | 16px16px16px | |
--bigbang-button-icon-size-lg | 20px20px20px | 20px20px20px | |
--bigbang-button-radius | 10px10px10px | 10px10px10px | |
--bigbang-color-action-subtle-hovered | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 | |
--bigbang-color-action-subtle-pressed | #ededed#ededed#ededed | #404040#404040#404040 | |
--bigbang-color-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
Motion and interaction
Section titled “Motion and interaction”| 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 and pressed colour | 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. |
| Loading | The spinner turns (animate-spin) |
period-spinner (1 s), linear, infinite |
Linear | The spinner stays visible but does not turn (reduce-motion:animate-none). |
IconButton uses the Button recipe and writes no transition class of its own. See Motion for the values.