StateDot

An 8px lifecycle indicator: a halo and a core in one element, both currentColor, so a state is one colour rule rather than two tokens.

Use when a row needs to show where a piece of work is (queued, running, finished, failed) without spending a whole line on it. It is the dot <r-tool-card> and the compaction marker both use.

Quick Start

Basic Usage

<r-state-dot state="idle"></r-state-dot>
<r-state-dot state="running"></r-state-dot>
<r-state-dot state="success"></r-state-dot>
<r-state-dot state="warning"></r-state-dot>
<r-state-dot state="error"></r-state-dot>

running pulses; the rest are still. An unknown value renders as idle rather than disappearing, so a state your producer added and the page has not learned yet still occupies its place in the row.

Beside a label

The dot only encodes state through colour; it does not explain what the colour means. Never let the colour be the only thing that distinguishes two rows. See design guidelines.

API Reference

Properties

Accessibility

The dot is aria-hidden until you give it a label. A dot beside a row that already states its outcome in text is noise in a screen reader: announcing "running" twice helps nobody. Set label only when the dot is the only carrier of the state:

<!-- Text already says it: leave the dot silent -->
<r-state-dot state="error"></r-state-dot> <span>Build failed</span>

<!-- The dot is alone in the cell: name it -->
<r-state-dot state="error" label="Build failed"></r-state-dot>

Parts

Styling

Each state is one colour: the halo is that colour at 16% and the core is a 60% inset of it, both painted from currentColor. So a state is one token, not two:

running pulses the core rather than spinning (at 8px, a spinning icon is too small to read as rotation), and the pulse stops under prefers-reduced-motion.