States
Section titled “States”The states of a Button and what changes visually in each. Colours come from tokens and change with the brand and mode.
| State | Supported | Visual change | Tokens |
|---|---|---|---|
| Default | Yes | Background, label colour and border of the chosen variant and tone. | color-action-primary-default, color-action-secondary-default, color-action-danger-default |
| Hover | Yes | The background steps one shade darker; the tertiary variant gains a fill. | See the table below |
| Pressed (active) | Yes | The background steps one shade darker again. | See the table below |
| Keyboard focus | Yes | A 2 px focus ring drawn 2 px outside the Button; drawn only with :focus-visible. |
color-focus-ring, border-width-focus |
| Disabled | Yes | Grey fill, faded label, transparent border, not-allowed cursor. Hover and pressed colours are not applied. |
color-action-disabled-default, color-action-on-disabled-default |
Disabled but focusable (focusableWhenDisabled) |
Yes | Looks the same as disabled; the focus ring is still drawn. | color-action-disabled-default, color-action-on-disabled-default, color-focus-ring |
Loading (loading) |
Yes | The variant keeps its colours; the label turns invisible but keeps its space, and a spinner turns in the middle. The cursor becomes progress; hover and pressed colours are not applied. Loading also wins over disabled: no disabled fill is drawn and the Button keeps focus. |
The variant’s own tokens |
| Selected, toggle | No | Not available in this version. | None |
Hover and pressed backgrounds
Section titled “Hover and pressed backgrounds”| Variant | Tone | Hover | Pressed |
|---|---|---|---|
primary |
neutral |
color-action-primary-hovered |
color-action-primary-pressed |
secondary |
neutral |
color-action-secondary-hovered |
color-action-secondary-pressed |
tertiary |
neutral |
color-action-subtle-hovered |
color-action-subtle-pressed |
primary |
danger |
color-action-danger-hovered |
color-action-danger-pressed |
secondary |
danger |
color-action-danger-subtle-hovered |
color-action-danger-subtle-pressed |
tertiary |
danger |
color-action-danger-subtle-hovered |
color-action-danger-subtle-pressed |
Measurements
Section titled “Measurements”| Property | Value | Token |
|---|---|---|
| Height, small / medium / large | 32 / 36 / 40 px; on a coarse pointer (touch), medium is 44 px and large 48 px | button-height-sm, button-height-md, button-height-lg |
| Inline padding, small / medium / large | 12 / 16 / 24 px | button-padding-inline-sm, button-padding-inline-md, button-padding-inline-lg |
| Padding on the side of a start or end icon | 2 px less: 10 / 14 / 22 px | button-icon-inset |
| Fill | Stops inside the 1 px border (background-clip: padding-box) |
border-width-default |
| Corner radius | 10 px | button-radius (radius.lg) |
| Icon size, small / medium / large | 16 / 16 / 20 px | button-icon-size-sm, button-icon-size-md, button-icon-size-lg |
| Gap between icon and label | 6 px | space.sm |
| Focus ring | 2 px thick, 2 px outside | border-width-focus |
| Label type style | label-md (14/20, medium weight) |
text.label-md |
Target size: the smallest size is 32 px tall, which meets the 24 px minimum target of WCAG 2.5.8.
The xs size is 24 px tall with 8 px inline padding, a 12 px icon and label-sm text (button-height-xs, button-padding-inline-xs, button-icon-size-xs). 24 × 24 px is the WCAG 2.2 minimum target size; use it only in dense table cells.
Tokens
Section titled “Tokens”Values are shown for the selected brand; switch brand from the top bar.
| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--bigbang-color-action-primary-default | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 | |
--bigbang-color-action-primary-hovered | #125768#262626#262626 | #a4d0df#d4d4d4#d4d4d4 | |
--bigbang-color-action-primary-pressed | #0e414f#404040#404040 | #cfe6ee#a1a1a1#a1a1a1 | |
--bigbang-color-action-on-primary-default | #ffffff#fafafa#fafafa | #0a0a0a#171717#171717 | |
--bigbang-color-action-secondary-default | #ffffff#ffffff#ffffff | #262626#262626#262626 | |
--bigbang-color-action-secondary-hovered | #fafafa#fafafa#fafafa | #303030#303030#303030 | |
--bigbang-color-action-secondary-pressed | #f5f5f5#f5f5f5#f5f5f5 | #404040#404040#404040 | |
--bigbang-color-action-on-secondary-default | #171717#171717#171717 | #fafafa#fafafa#fafafa | |
--bigbang-color-action-subtle-hovered | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 | |
--bigbang-color-action-subtle-pressed | #ededed#ededed#ededed | #404040#404040#404040 | |
--bigbang-color-action-danger-default | #a6383c#a6383c#a6383c | #ff9a97#ff9a97#ff9a97 | |
--bigbang-color-action-danger-hovered | #822b2e#822b2e#822b2e | #ffbebb#ffbebb#ffbebb | |
--bigbang-color-action-danger-pressed | #4c1d1d#4c1d1d#4c1d1d | #ffd6d4#ffd6d4#ffd6d4 | |
--bigbang-color-action-on-danger-default | #ffffff#ffffff#ffffff | #0a0a0a#0a0a0a#0a0a0a | |
--bigbang-color-action-danger-subtle-hovered | #fff4f3#fff4f3#fff4f3 | #331212#331212#331212 | |
--bigbang-color-action-danger-subtle-pressed | #ffe8e7#ffe8e7#ffe8e7 | #4c1d1d#4c1d1d#4c1d1d | |
--bigbang-color-action-on-danger-subtle-default | #a6383c#a6383c#a6383c | #ffbebb#ffbebb#ffbebb | |
--bigbang-color-action-disabled-default | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 | |
--bigbang-color-action-on-disabled-default | #a1a1a1#a1a1a1#a1a1a1 | #525252#525252#525252 | |
--bigbang-color-text-default | #171717#171717#171717 | #fafafa#fafafa#fafafa | |
--bigbang-color-border-default | #e5e5e5#e5e5e5#e5e5e5 | #404040#404040#404040 | |
--bigbang-color-border-danger | #c14347#c14347#c14347 | #ff9a97#ff9a97#ff9a97 | |
--bigbang-color-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c | |
--bigbang-button-height-sm | 32px32px32px | 32px32px32px | |
--bigbang-button-height-md | 36px36px36px | 36px36px36px | |
--bigbang-button-height-lg | 40px40px40px | 40px40px40px | |
--bigbang-button-padding-inline-sm | 12px12px12px | 12px12px12px | |
--bigbang-button-padding-inline-md | 12px12px12px | 12px12px12px | |
--bigbang-button-padding-inline-lg | 16px16px16px | 16px16px16px | |
--bigbang-button-icon-inset | 2px2px2px | 2px2px2px | |
--bigbang-button-radius | 10px10px10px | 10px10px10px | |
--bigbang-button-icon-size-sm | 16px16px16px | 16px16px16px | |
--bigbang-button-icon-size-md | 16px16px16px | 16px16px16px | |
--bigbang-button-icon-size-lg | 20px20px20px | 20px20px20px |
Motion and interaction
Section titled “Motion and interaction”| Interaction | Property | Duration token | Easing token | Reduced motion |
|---|---|---|---|---|
| Press | scale 1 → 0.97 (motion.press) |
Down motion-press-duration (70 ms), release motion-release-duration (230 ms) |
motion-press-easing; release easing-spring-productive-fast |
Scale stays 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 only a colour change. |
| Focus | The focus ring appears instantly, with no transition | None | None | Unchanged. |
| Loading | Spinner rotation (animate-spin) |
period-spinner (1 s), linear, infinite |
Linear | The spinner does not rotate but stays visible (reduce-motion:animate-none). |
| Success | Check mark opacity and scale 0.6 → 1 (motion.success), once |
motion-feedback-duration (240 ms), held for motion-feedback-hold (2000 ms) |
motion-feedback-easing |
Scale stays 1; the mark appears in 110 ms and stays still. |
| Enter and exit | None; the Button arrives with the page | None | None | Not applicable. |
Every value comes from the tokens on the Motion foundation page; Button writes no transition class of its own.