A compact status or category label that can also be linked. These classes belong to the opt-in Official preset. Add
@presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight
used alongside these structural shortcuts.
Classes
badge,badge--link
Example
The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.
<span class="badge">New</span>
<a class="badge badge--link" href="/releases">Release notes</a>Variants and composition
badge–link gives an anchor the linked badge’s larger transparent hit target. Color remains a consumer utility.
Behavior and accessibility
Badge geometry does not choose a tone. Linked badges expand their pointer target; use a real link and keep the visible text as its name.
Reference
See the interactive Storybook specimen. Continue to Breadcrumb or return to the Official preset overview.