Badge
A short status label. It is a <span>, so it sits inline with the text or the row it belongs to.
A badge is a label, not a control. If the reader can act on it, render a hui-button instead — a badge has no focus ring and no hit area. The destructive variant is a tint with coloured text rather than a filled pill, at values that clear AA; see UI-CONTRACT-006.
.hui-badge
A pill label. Default is the primary fill.
<span class="hui-badge">Open</span>.hui-badge--destructive
The destructive tint with its coloured text.
.hui-badge--outline
A transparent fill with a border.
.hui-badge--secondary
Secondary fill.