A basic badge is a read-only status or label. It is never clickable.
Tokens, sizes, measurements and requirements. Values come from the live token package and from Figma: Basic.
Resolved from the live token package.
| State · emphasis | Part | Token | Value |
|---|
Open point: Alert warning uses text-primary at every emphasis: there is no warning text token with enough contrast.
Three sizes. Large and Medium look different on mobile and desktop. Small is the same size as Medium on mobile. Padding is under Measurements.
| Size | Height desktop · mobile | Type desktop | Type mobile | Availability |
|---|---|---|---|---|
| Large | 26px · 24px | 14/14, 0.56px | 14/14, 0.48px | Desktop and mobile |
| Medium (default) | 22px · 18px | 14/14, 0.56px | 12/12, 0.48px | Desktop and mobile |
| Small | 18px · 18px | 12/12, 0.48px | 12/12, 0.48px | Desktop and mobile |
Weight is 500 (sentence case) or 600 (upper case: Figma 700 minus 100). The icon is 14px, the gap 4px (space-4). Figma Badge/Basic: node 3912:157194.
Padding of the three sizes, at true size. Window follows the window width; Desktop (769px and up) and Mobile force the breakpoint. The shaded areas are the padding; the numbers are read from the component.
| Size | Padding desktop | Padding mobile |
|---|---|---|
| Large | 6px 8px | 5px 6px |
| Medium | 4px 5px | 3px 4px |
| Small | 3px 5px | 3px 4px |
With an icon the height grows by the icon (14px) only when the icon is taller than the line: Medium 22px, Small 20px on desktop, Medium and Small 20px on mobile. The gap between icon and text is 4px (space-4).
Vertical and horizontal padding as spacing tokens.
| Size | Vertical desktop · mobile | Horizontal desktop · mobile |
|---|---|---|
| Large | 6px · space-4 + 1px | space-8 · 6px |
| Medium | space-4 · 3px | 5px · space-4 |
| Small | 3px · 3px | 5px · space-4 |
6px, 5px, 3px and 1px have no spacing token; they are the values Figma uses.
| Property | Value |
|---|---|
| Family | Breuer Condensed |
| Weight | 500 sentence case · 600 upper case (Figma 700 minus 100) |
| Case | Sentence case by default; badge-basic--uppercase for categories |
| Feature settings | 'ss02' 1, 'ss03' 1 (Medium also 'ss06' 1) |
A badge has no interaction states: no hover, no focus, no pressed, no disabled.
| Topic | Rule |
|---|---|
| Interaction | None. A badge is never a link or a button, has no focus and no hover state. |
| Width | Hugs the text. No maximum: keep labels to one or two words. |
| Wrapping | Never wraps (white-space: nowrap). |
| Topic | Requirement |
|---|---|
| Name | The text of the badge. The icon is decorative: aria-hidden="true". |
| Color | Not the only carrier of meaning (WCAG 1.4.1): pair an alert color with its icon or clear text. |
| Contrast | Text and background meet 4.5:1. Alert warning uses black text for that reason. |
| Interactive content | None. |