A dot is a small status marker without text.
Tokens, sizes and requirements. Values come from Figma: Dot.
Resolved from the live token package.
| Variant | Part | Token | Value |
|---|
| Size | Diameter | Class | Breakpoints |
|---|---|---|---|
| Large | 10px | badge-dot | Same on mobile and desktop |
| Medium | 8px | badge-dot--md | Same |
| Small | 6px | badge-dot--sm | Same |
| Attribute | Value |
|---|---|
| Shape | A circle |
| Diameter | 10px Large, 8px Medium, 6px Small |
| Text and icon | None |
| Distance to a text | space-4 to space-8 (set by the page: the dot has no margin) |
| Position on an icon | The center of the dot sits on the top right corner of the icon |
A dot has no padding, so there is no measurement figure. Diameter values are from Figma (Dot).
The dot has no spacing of its own. The page sets the gap to the label or the position on the icon.
A dot has no interaction states. Its state is the status it shows: Danger, Warning, Success, Information or Neutral.
| Topic | Rule |
|---|---|
| Interaction | None. Never a link or a button. |
| Placement | Next to a text, or on the top right corner of an icon or a text. |
| Number | One dot. Never stacked or close to another dot. |
| Topic | Requirement |
|---|---|
| Name | None: aria-hidden="true". Say the status in text or in an aria-label on the item the dot belongs to. |
| Color | Not the only carrier of meaning (WCAG 1.4.1). |
| Contrast | A dot is a graphic: 3:1 against the background (WCAG 1.4.11). Neutral (surface-20) on white is below that: pair it with text. |
| Interactive content | None. |