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.
- 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.
- Form validation—use field errors and a
Callout.
- Primary communication of complex incidents—use
Message, Callout, or dedicated incident UI.
- Decorative emphasis without semantic meaning—omit the dot.
- 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.
- Debounce state changes when upstream telemetry flickers—rapid pulsing is both disorienting and an accessibility risk.
Do
- 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.
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.
