Status dot

Usage

Overview

StatusDot is a minimal colored dot placed next to labels, avatars, or timeline entries to signal state—online, degraded, alerting. Color alone is not enough, so a dot always appears beside text or a tooltip on surfaces where accuracy matters. Pulsing is reserved for genuinely live or urgent conditions; overusing it trains operators to ignore it.

When to use

Compact rows where a full Badge would crowd layout (roster presence, integration health in tables).
Realtime connectivity when paired with an explanatory text label.
Severity in dense monitoring strips alongside counts.
Dormant rows that still need a status gutter—use Neutral, which drops the attention glow.

When not to use

Form validation—use field errors and a Banner.
Primary communication of complex incidents—use Message, Banner, or dedicated incident UI.
Decorative emphasis without semantic meaning—omit the dot.

Content guidelines

Neighboring text states the status in words ("Degraded", "Live"); localize via formatMessage.
Tooltips expand acronyms or timestamps. They do not replace the inline text on critical surfaces.

Behavior and states

Debounce state changes when upstream telemetry flickers—rapid pulsing is both disorienting and an accessibility risk.

Best practices

Pair dots with textual status everywhere accuracy matters (911, QA).
Align color tokens with semantic meanings shared across the app.

Don't

Rely on pulsing for every "connected" indicator—prefer a stable dot with copy.
Stack multiple dots without a legend.

Accessibility

Status is exposed to assistive tech via text, not the dot. Pulsing is not the only cue. Respect prefers-reduced-motion by reducing or eliminating pulse animation. See Accessibility for the full contract.

Badge for labeled chips.
Banner for detailed alerts.
Tooltip for supplementary detail.

Split button / Accessibility

Status dot / API and Development

On this page

Status dot

Usage

Overview

When to use

Compact rows where a full Badge would crowd layout (roster presence, integration health in tables).
Realtime connectivity when paired with an explanatory text label.
Severity in dense monitoring strips alongside counts.
Dormant rows that still need a status gutter—use Neutral, which drops the attention glow.

When not to use

Form validation—use field errors and a Banner.
Primary communication of complex incidents—use Message, Banner, or dedicated incident UI.
Decorative emphasis without semantic meaning—omit the dot.

Content guidelines

Neighboring text states the status in words ("Degraded", "Live"); localize via formatMessage.
Tooltips expand acronyms or timestamps. They do not replace the inline text on critical surfaces.

Behavior and states