A number badge is a round badge with a number or a check mark.
Tokens, sizes and requirements. Values come from the live token package and from Figma: Number.
Resolved from the live token package.
| Variant | Part | Token | Value |
|---|
Three sizes. Mobile and desktop have different diameters. The circle is round for one digit and wider for more (min-width equals the height).
| Size | Desktop (769px and up) | Mobile | Number | Check mark |
|---|---|---|---|---|
| Large | 24 × 24px | 20 × 20px | 14/14, 0.56px · mobile 12/12, 0.48px | 20px |
| Medium | 20px high | 18px high | 14/14, 0.56px · mobile 12/12, 0.48px | 14px |
| Small | 16px high | 14px high | 10/10 | 11px desktop · 10px mobile |
Horizontal padding of the three sizes with a number, at true size. Window follows the window width; Desktop (769px and up) and Mobile force the breakpoint. The height and width of the circle are in the table.
| Size | Horizontal padding desktop · mobile |
|---|---|
| Large | 5px · 5px |
| Medium | 5px · 4px |
| Small | 3px · 2px |
A badge is round for one digit and wider for more digits (min-width equals the height). Open point: Figma still holds the desktop label size (14/14) and a 20px check mark on Large mobile, in a 20px circle; the mobile badge here uses 12/12 for the number like every other mobile badge, and the 20px check mark as in Figma. Confirm both.
Horizontal padding only; the height comes from the diameter.
| Size | Horizontal desktop · mobile |
|---|---|
| Large | 5px · 5px |
| Medium | 5px · space-4 |
| Small | 3px · 2px |
5px, 3px and 2px have no spacing token; they are the values Figma uses.
| Property | Value |
|---|---|
| Family | Breuer Condensed, Bold (weight 600) |
| Case | Uppercase |
| Large, Medium | label-sm 14/14, 0.56px · mobile 12/12, 0.48px |
| Small | 10/10 |
| Feature settings | 'ss02' 1, 'ss03' 1 (not on Small) |
A number badge has no interaction states.
| Topic | Rule |
|---|---|
| Interaction | None. Never a link or a button. |
| Width | Round for one digit; grows with the number. |
| Content | A number, or a check mark on Large. |
| Topic | Requirement |
|---|---|
| Name | The number is read as text. Give it context in the label of the item it belongs to or in visually hidden text. |
| Check mark | Decorative: aria-hidden="true". Say “done” in text. |
| Contrast | White on black: far above 4.5:1. |
| Interactive content | None. |