Label Badge
Pill-shaped key=value badge for labels. Gray bg / dark text (light theme); inverted in dark. Not uppercased. Used on /targets, /service-discovery for label display.
DO
Use for every label, flag, and identifier site-wide — replace bare <code> on /tsdb-status and /flags.
DON'T
Mix Label Badge with bare <code> for the same concept on different pages — see INC-003.
Design
default
job="demo"
Gray pill; renders full label text including quotes.
Component reference (screenshots)
Placeholder screenshots — the audited app is live at prometheus-e83j.onrender.com.
Implementation
<LabelBadge>{name}={value ? `"${value}"` : ''}</LabelBadge>Layout
| Property | Value |
|---|---|
| padding | 0 10px badge-padding-x |
| border-radius | 1000px pill |
| font-size | 11px label/badge |
| font-weight | 700 |