<div class="row">
  <span class="badge">Neutral</span>
  <span class="badge badge--accent">Accent</span>
  <span class="badge badge--success">On track</span>
  <span class="badge badge--warning">At risk</span>
  <span class="badge badge--danger">Breach</span>
</div>

Live Degraded

With status dot

<div class="row">
  <span class="badge badge--success"><span class="badge__dot"></span> Live</span>
  <span class="badge badge--warning"><span class="badge__dot"></span> Degraded</span>
</div>

Usage

Colour signals a judgement (trend, forecast, risk), never decorate a plain number.
Make chips self-describing: prefix the field name, "Stage · Lead · 30%".
Neutral badge for descriptive data; green on-track, amber at-risk, red alert.

‹ Button Avatar ›