ComponentsSpec

Badge

A short mono label for status or category. Neutral by default; the status tints only when the state is the point.

Neutral Shipped Spec

Show code

<span class="badge">Neutral</span>
<span class="badge badge-solid">Shipped</span>
<span class="badge badge-line">Spec</span>

Status

Live Review Failed

Show code

<span class="badge badge-ok"><span class="dot"></span>Live</span>
<span class="badge badge-warn"><span class="dot"></span>Review</span>
<span class="badge badge-danger"><span class="dot"></span>Failed</span>

Annotation tag

Shipped on the ViewRyt phone walkthrough: a mono chip struck from --tint at 16%, so it stays a tint over any surface.

Above the fold

Show code

<span class="tag">Above the fold</span>

Guidelines

One or two words. A badge is read at a glance, not studied.
A badge is not a button. If it filters or toggles, use a Chip.
Pair status colour with a word - colour is never the only signal.