Badge

Stable

Small inline labels for status, categories, or counts. Always a <span> — never interactive on its own.

Recent decision: the status dot is a fixed sizing.indicator.dot token, and the brand variant's text now sits on the AA-paired on-surface.accent role. See Decisions.

Variants

Brand Success Warning Error Info Neutral

HTML

<span class="vi-badge vi-badge--brand">Brand</span>
<span class="vi-badge vi-badge--success">Success</span>
<span class="vi-badge vi-badge--warning">Warning</span>
<span class="vi-badge vi-badge--error">Error</span>
<span class="vi-badge vi-badge--info">Info</span>
<span class="vi-badge vi-badge--neutral">Neutral</span>

With dot indicator

Add vi-badge--dot to prepend a status circle. Useful for live/active/pending states.

Active Pending Offline Draft

HTML

<span class="vi-badge vi-badge--success vi-badge--dot">Active</span>
<span class="vi-badge vi-badge--warning vi-badge--dot">Pending</span>

Class reference

Class	Type	Description
vi-badge	Base	Required. Sets size, font, letter-spacing, border-radius.
vi-badge--brand	Variant	Brand blue tint.
vi-badge--success	Variant	Green. Active, complete, healthy states.
vi-badge--warning	Variant	Yellow. Pending, needs attention.
vi-badge--error	Variant	Red. Failed, invalid, critical.
vi-badge--info	Variant	Light blue. Informational, new.
vi-badge--neutral	Variant	Grey. Draft, inactive, secondary labels.
vi-badge--dot	Modifier	Adds a colored status dot before the label text.