| State |
Visual change |
Tokens |
| Default |
Muted label, layer track |
color-fg-subtle, color-surface-layer-2 |
| Hover |
Dark label and a light fill on an unselected option |
color-fg-default, color-action-subtle-hovered |
| Pressed |
The option shrinks to 0.97 |
motion-press-scale |
| Selected |
Dark label, raised pill with a shadow |
color-fg-default, color-surface-raised, shadow-raised |
| Focus |
2 px outer focus ring, 2 px offset |
color-focus-ring, border-width-focus |
| Disabled |
Muted label, not-allowed cursor |
color-fg-disabled |
| Size |
Height |
Inline padding |
Text |
Icon |
sm |
32 px (tab-height-sm) |
8 px (tab-padding-inline-sm) |
text-label-sm |
icon-size-sm |
md |
36 px (tab-height-md) |
12 px (tab-padding-inline-md) |
text-label-md |
icon-size-md |
Track padding and the gap between options are 2 px (space-xxs). The track corner radius is tab-radius; the pill and options are smaller by the padding. The total height is the option height plus 4 px.
Values are shown for the selected brand; change the brand from the top bar.
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-tab-height-sm | | 32px32px32px | 32px32px32px |
--bigbang-tab-height-md | | 36px36px36px | 36px36px36px |
--bigbang-tab-padding-inline-sm | | 6px6px6px | 6px6px6px |
--bigbang-tab-padding-inline-md | | 8px8px8px | 8px8px8px |
--bigbang-tab-radius | | 10px10px10px | 10px10px10px |
--bigbang-color-surface-sunken | | #f5f5f5#f5f5f5#f5f5f5 | #171717#171717#171717 |
--bigbang-color-surface-raised | | #ffffff#ffffff#ffffff | #262626#262626#262626 |
--bigbang-color-focus-ring | | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
--bigbang-icon-size-sm | | 16px16px16px | 16px16px16px |
--bigbang-icon-size-md | | 20px20px20px | 20px20px20px |
| Interaction |
Property |
Duration token |
Easing token |
Reduced motion |
| Pill slides to the selected option |
translate, width |
motion-indicator-duration (310 ms) |
easing-spring-productive-base |
Moves at once (1 ms). |
| 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. |
| Colour |
color, background-color |
motion-hover-duration (110 ms) |
motion-hover-easing |
Unchanged. |
| First render |
The pill appears in place |
None |
None |
Unchanged. |
The pill width animates only because it is absolutely positioned (MOT-02 exception). See Motion for the values.