| State |
Visual change |
Tokens |
| Default |
Button fill; a 1 px divider between the parts: on primary a 30 % opaque light line on the fill, on secondary the border colour (the danger border for danger) |
color-action-primary-default, color-action-on-primary-default, color-border-default, color-border-danger |
| Hover |
Each part darkens its own colour |
color-action-primary-hovered |
| Pressed |
The part scales to 0.97 |
motion-press-scale |
| Menu open |
The menu button keeps its hovered fill; the chevron stays still |
color-action-*-hovered |
| Highlighted item |
The item background darkens |
color-surface-hovered |
| Focus |
2 px outer focus ring |
color-focus-ring, border-width-focus |
| Disabled |
Both parts are dimmed |
color-action-disabled-default |
| Size |
Height |
Menu button |
sm |
32 px (button-height-sm) |
32 × 32 px square |
md |
36 px (button-height-md) |
36 × 36 px square |
lg |
40 px (button-height-lg) |
40 × 40 px square |
The parts have no gap; their borders overlap and the inner corners are square (ButtonGroup attached). The menu opens 4 px from the button, is at least 192 px wide (menu-min-width), has 4 px padding (space-xs) and the radius-md corner radius.
Values follow the selected brand; change the 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-on-primary-default | | #ffffff#fafafa#fafafa | #0a0a0a#171717#171717 |
--bigbang-color-action-secondary-default | | #ffffff#ffffff#ffffff | #262626#262626#262626 |
--bigbang-color-action-danger-default | | #a6383c#a6383c#a6383c | #ff9a97#ff9a97#ff9a97 |
--bigbang-color-border-default | | #e5e5e5#e5e5e5#e5e5e5 | #404040#404040#404040 |
--bigbang-color-surface-raised | | #ffffff#ffffff#ffffff | #262626#262626#262626 |
--bigbang-color-surface-hovered | | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 |
--bigbang-color-focus-ring | | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
--bigbang-shadow-overlay | | 0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549) | 0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963) |
--bigbang-button-height-sm | | 32px32px32px | 32px32px32px |
--bigbang-button-height-md | | 36px36px36px | 36px36px36px |
--bigbang-button-height-lg | | 40px40px40px | 40px40px40px |
--bigbang-button-radius | | 10px10px10px | 10px10px10px |
--bigbang-radius-md | | 8px8px8px | 8px8px8px |
| Interaction |
Property |
Duration token |
Easing token |
Reduced motion |
| Menu opens |
opacity 0 → 1, scale 0.96 → 1, 4 px toward the button (motion.popover) |
motion-popover-enter-duration (150 ms) |
motion-popover-enter-easing |
No scale or shift; the menu only appears. |
| Menu closes |
opacity and scale back |
motion-popover-exit-duration (110 ms) |
motion-popover-exit-easing |
The menu only fades. |
| Press |
scale 1 → 0.97 |
motion-press-duration (70 ms) |
motion-press-easing |
Scale stays 1. |
| Highlighted item |
Background colour (motion.hover) |
motion-hover-duration (110 ms) |
motion-hover-easing |
Unchanged. |
See Motion for the values.