NS Design System
v3.0.0 · 257 tokens

72Badge

Status as a hairline box and a coloured dot — never a pastel fill. Principle 3: the dot carries the colour and the text stays ink, so five badges in a row are one signal colour apart rather than five competing washes.

Use it for

  • A state the reader cannot change — draft, published, failed
  • A short mono word, not a sentence

Not for

  • Anything clickable — a tag is a noun you can click, a badge is a state you cannot. Use Tag
  • A tinted background per status — that is the pastel-pill pattern this replaces
  • Long text — if it wraps it is not a badge

Statuses

Only the dot changes hue. The ink stays --color-ink in all five.

Draft Published Review Failed Beta
markup
<span class="ns-badge"><span class="ns-badge__dot" aria-hidden="true"></span>Draft</span>
<span class="ns-badge ns-badge--success"><span class="ns-badge__dot" aria-hidden="true"></span>Published</span>
<span class="ns-badge ns-badge--warning"><span class="ns-badge__dot" aria-hidden="true"></span>Review</span>
<span class="ns-badge ns-badge--error"><span class="ns-badge__dot" aria-hidden="true"></span>Failed</span>
<span class="ns-badge ns-badge--accent"><span class="ns-badge__dot" aria-hidden="true"></span>Beta</span>

With an icon

An icon REPLACES the dot; it never joins it. Two status marks on one badge is two claims about the same state.

Certified Deprecated
markup
<span class="ns-badge ns-badge--success"><i class="ph ph-seal-check ns-badge__icon" aria-hidden="true"></i>Certified</span>
<span class="ns-badge ns-badge--error"><i class="ph ph-warning ns-badge__icon" aria-hidden="true"></i>Deprecated</span>

Overridden by a utility

The badge sits in @layer ns-components, so a Tailwind utility wins with no !important — this is the override contract, rendered.

Default Utilities applied
markup
<span class="ns-badge">Default</span>
<span class="ns-badge rounded-pill px-card">Utilities applied</span>

Accessibility contract

  • The dot is decorative and aria-hidden; the word carries the meaning
  • Colour is never the only signal — the label always says the state in words