Status Indicator
Small ~16px SVG circle next to a pool-level 'N/M up' counter. Filled green (ok) or red (error). Pure visual — no text.
DO
Always pair with a text counter or label — color alone is inaccessible.
DON'T
Use as the only state affordance; pair with Health Status Badge or counter text.
Design
ok
Green solid circle.
error
Red solid circle.
Component reference (screenshots)
Placeholder screenshots — the audited app is live at prometheus-e83j.onrender.com.
Implementation
<span className="status-dot" data-state={state} aria-hidden="true" />Layout
| Property | Value |
|---|---|
| size | 16px |
| border-radius | 50% |
Accessibility
| ARIA | aria-hidden on the dot. State is announced via adjacent text. |