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.
Reset zoom to 100%
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
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.
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.