States
Section titled “States”| State | Look | data-state |
|---|---|---|
| Ready | Copy icon | idle |
| Copied | Check mark, tooltip “Copied” | copied |
| Failed | Copy icon, tooltip “Could not copy” | failed |
Measurements
Section titled “Measurements”| Property | Value | Token |
|---|---|---|
Button (icon, button) |
36 px | button-height-md |
Button (inline) |
32 px | button-height-sm |
| Value to button | 4 px | space-xs |
Tokens
Section titled “Tokens”Values are shown for the selected brand; switch brands from the top bar.
| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--bigbang-button-height-sm | 32px32px32px | 32px32px32px | |
--bigbang-button-height-md | 36px36px36px | 36px36px36px | |
--bigbang-color-text-default | #171717#171717#171717 | #fafafa#fafafa#fafafa | |
--bigbang-space-xs | 4px4px4px | 4px4px4px | |
--bigbang-motion-feedback-duration | 0.24s0.24s0.24s | 0.24s0.24s0.24s |
Motion and interaction
Section titled “Motion and interaction”| Interaction | Property | Duration token | Easing token | Reduced motion |
|---|---|---|---|---|
| Press | The button shrinks slightly (motion.press) |
motion-press-duration |
motion-press-easing |
No shrink. |
| Copied | The check mark grows in from 60% (motion.success) |
motion-feedback-duration |
motion-feedback-easing |
It only appears. |
| Tooltip | Slides open (motion.tooltip) |
motion-tooltip-enter-duration |
easing-productive-enter |
It only fades. |