Status dot
A small square in a tone. Reads at a glance next to a label.
Examples
Dots
Live
Review
Blocked
Draft
Anatomy
span.dot | Empty inline square, aligned to the middle of the line. Always next to a text label. |
API
| Attribute | Values | Description |
|---|---|---|
data-tone | accentsuccesswarningdangerinfo | Colour of the square. Default accent. |
Accessibility
- The dot is empty and announces nothing. The label beside it carries the status; never use the dot alone.
- If it must stand alone, give it
role="img"and anaria-label("Live").