| Tone |
Icon |
Tokens |
success |
circle-check |
color-status-success-background, color-icon-success |
danger |
circle-alert |
color-status-danger-background, color-icon-danger |
warning |
triangle-alert |
color-status-warning-background, color-icon-warning |
info |
info |
color-status-info-background, color-icon-info |
| Property |
Value |
Token |
| Icon tile |
64 px |
empty-state-media-md |
| Icon |
24 px |
icon-size-lg |
| Text width |
At most 440 px |
empty-state-text-width |
| Title |
lg |
text.heading-lg |
The sm size uses the EmptyState sm layout: 12 px inline and 16 px block padding, 8 px gaps, the empty-state-media-sm icon area, a 20 px icon and a small title.
Values follow the selected brand; change the brand in the top bar.
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-empty-state-media-md | | 64px64px64px | 64px64px64px |
--bigbang-empty-state-text-width | | 440px440px440px | 440px440px440px |
--bigbang-color-status-success-background | | #def6e5#def6e5#def6e5 | #103620#103620#103620 |
--bigbang-color-status-danger-background | | #ffe8e7#ffe8e7#ffe8e7 | #4c1d1d#4c1d1d#4c1d1d |
--bigbang-color-status-warning-background | | #ffebd5#ffebd5#ffebd5 | #422702#422702#422702 |
--bigbang-color-status-info-background | | #e1f1ff#e1f1ff#e1f1ff | #0d304b#0d304b#0d304b |
--bigbang-motion-feedback-duration | | 0.24s0.24s0.24s | 0.24s0.24s0.24s |
--bigbang-motion-feedback-easing | | cubic-bezier(0, 0, 0.38, 0.9)cubic-bezier(0, 0, 0.38, 0.9)cubic-bezier(0, 0, 0.38, 0.9) | cubic-bezier(0, 0, 0.38, 0.9)cubic-bezier(0, 0, 0.38, 0.9)cubic-bezier(0, 0, 0.38, 0.9) |
--bigbang-motion-feedback-scale | | 0.60.60.6 | 0.60.60.6 |
| Interaction |
Property |
Duration token |
Easing token |
Reduced motion |
Icon (motion.success) |
opacity, scale |
motion-feedback-duration |
motion-feedback-easing |
Fades in only. |
Text (motion.reveal) |
opacity |
motion-skeleton-reveal-duration |
easing-productive-enter |
Shorter. |
See Motion for the values.