States
Section titled “States”Badge is not interactive. It is a <span> in the text flow, so mouse, keyboard and touch do not change its state.
| State | Supported | Visual change | Tokens |
|---|---|---|---|
| Default | Yes | Colour from tone and variant | color-status-{tone}-background, -border, -foreground, -emphasis, -on-emphasis |
Category tone: violet, teal, pink |
Yes | The pastel tag pair; on bold the fill and the text swap |
color-tag-{hue}-background, -foreground, -border |
| Hover | No | None; a <span> does not react to the pointer |
- |
| Pressed | No | None; it cannot be clicked | - |
| Focus | No | None; it takes no focus | - |
| Disabled | No | None; it has no action to disable | - |
| Selected | No | None; it is not selectable | - |
| Long text | Partly | Text stays on one line (whitespace-nowrap) and the Badge grows wider |
- |
Measurements
Section titled “Measurements”| Property | Value | Token |
|---|---|---|
Height, sm |
16 px | badge-height-sm |
Height, md |
20 px | badge-height-md |
Inline padding, sm |
6 px | badge-padding-inline-sm |
Inline padding, md |
8 px | badge-padding-inline-md |
Icon-side padding, sm / md |
4 px / 6 px | badge-padding-inline-icon-sm, badge-padding-inline-icon-md |
| Corner radius | Fully rounded | badge-radius (radius.full) |
| Icon size | 12 px | badge-icon-size |
| Icon to text gap | 4 px | space.xs |
| Border | 1 px on subtle; transparent on bold |
color-status-{tone}-border |
| Text style | 12 px / 16 px, medium weight | label-sm |
A count badge is at least as wide as it is tall and fully round, with 4 px (space-xs) on each side. A dot badge is 8 px across (badge-dot-size) in the tone’s emphasis colour. An outline badge has no fill; it keeps the pastel border and tone text of subtle: status-*-border and status-*-foreground for the status tones, tag-*-border and tag-*-foreground for the violet, teal and pink category hues. The text has at least 4.5:1 contrast on the page surface.
Tokens
Section titled “Tokens”Values follow the selected brand; you can change the brand in the top bar. Every tone has the same five tokens; the table shows the success tone.
| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--bigbang-color-status-success-background | #def6e5#def6e5#def6e5 | #103620#103620#103620 | |
--bigbang-color-status-success-border | #c3eed1#c3eed1#c3eed1 | #0d5c34#0d5c34#0d5c34 | |
--bigbang-color-status-success-foreground | #0d5c34#0d5c34#0d5c34 | #c3eed1#c3eed1#c3eed1 | |
--bigbang-color-status-success-emphasis | #2da264#2da264#2da264 | #7dd09b#7dd09b#7dd09b | |
--bigbang-color-status-success-on-emphasis | #092414#092414#092414 | #092414#092414#092414 | |
--bigbang-badge-height-sm | 16px16px16px | 16px16px16px | |
--bigbang-badge-height-md | 20px20px20px | 20px20px20px | |
--bigbang-badge-padding-inline-sm | 6px6px6px | 6px6px6px | |
--bigbang-badge-padding-inline-md | 8px8px8px | 8px8px8px | |
--bigbang-badge-padding-inline-icon-sm | 4px4px4px | 4px4px4px | |
--bigbang-badge-padding-inline-icon-md | 6px6px6px | 6px6px6px | |
--bigbang-badge-icon-size | 12px12px12px | 12px12px12px | |
--bigbang-badge-radius | 9999px9999px9999px | 9999px9999px9999px |
Motion and interaction
Section titled “Motion and interaction”| Interaction | Motion | Reduced motion |
|---|---|---|
| Hover, press, focus | None: Badge is not interactive | Nothing to reduce |
| Enter and status change | opacity 0 → 1 (motion.reveal), motion-skeleton-reveal-duration (110 ms), easing-productive-enter; a new key redraws it when the status changes |
Unchanged; it is only a short opacity change |
| Exit | None; the Badge leaves at once | Nothing to reduce |
Values come from tokens; see the Motion page.