A small 8px coloured dot that conveys a state at a glance — presence, list-item status, or a compact marker beside a label.
Eight colour variants map to semantic states.
The common case — the dot supplements adjacent text, so it stays decorative.
When the dot stands alone, label exposes it as an
img with an accessible name.
presence dots, list-item status, and compact state markers next to text. For an icon with a glyph, use a Status Icon.
status to a consistent meaning across the product.label whenever the dot appears without text.label the dot is aria-hidden, relying on adjacent text for meaning.label switches it to role="img" with that aria-label.inverse on dark surfaces; ensure the dot is distinguishable from its background.