Health Status Badge
Pill-shaped UP / DOWN badge. UP = green.1 bg / green.8 text (light); swapped in dark. DOWN = red family. Uppercase, bold.
DO
Use for every boolean/enum state field app-wide — UP/DOWN, Successful/Failed, Ready/Unhealthy.
DON'T
Render 'Successful' / 'Failed' as plain black text — see INC-002.
Design
ok
UP
Green pill, 'UP' text.
error
DOWN
Red pill, 'DOWN' text.
Component reference (screenshots)
Placeholder screenshots — the audited app is live at prometheus-e83j.onrender.com.
Implementation
<HealthBadge value={target.state} />Layout
| Property | Value |
|---|---|
| padding | 0 10px badge-padding-x |
| border-radius | 1000px pill |
| font-size | 11px label/badge |
| text-transform | uppercase |
Accessibility
| Contrast | Green.8 on green.1 passes AA for bold 11px; swapped dark pairs also pass. |
| Screen reader | Text content reads correctly — no extra ARIA needed. |