Status pill
Small accent chip for a short state or count, usually trailing a list row.
Preview
Pill
On site
<span class="nx-pill">On site</span><NxStatusPill>On site</NxStatusPill>API
Classes
| Class | Description |
|---|---|
.nx-pill | .68rem/640, accent-100 bg, accent-700 text, full radius |
Accessibility
- Text-only — never rely on the pill's colour alone; the word itself must convey the state ("On site", not a bare dot).
Do / Don’t
- Do: Keep the label to 1-2 words.Don’t: Don't use it for a primary action — it isn't interactive.