Badge
A compact label for status or counts. Badges are not interactive; if the label matters to assistive technology, keep it as real text, not colour alone.
<div class="iv-stack iv-u-gap-4">
<div class="iv-cluster iv-u-gap-2">
<span class="iv-badge">Draft</span>
<span class="iv-badge iv-badge--primary">Primary</span>
<span class="iv-badge iv-badge--success">Published</span>
<span class="iv-badge iv-badge--warning">Needs review</span>
<span class="iv-badge iv-badge--danger">Failed</span>
<span class="iv-badge iv-badge--info">Beta</span>
</div>
<div class="iv-cluster iv-u-gap-2">
<span class="iv-badge iv-badge--solid">Draft</span>
<span class="iv-badge iv-badge--solid iv-badge--primary">Primary</span>
<span class="iv-badge iv-badge--solid iv-badge--success">Published</span>
<span class="iv-badge iv-badge--solid iv-badge--warning">Needs review</span>
<span class="iv-badge iv-badge--solid iv-badge--danger">Failed</span>
<span class="iv-badge iv-badge--solid iv-badge--info">Beta</span>
</div>
<p class="iv-u-m-0 iv-u-text-sm">
A badge is a label, not a control. When the colour carries the only
meaning, the text repeats it: <span class="iv-badge iv-badge--danger">Build failed</span>
</p>
</div>Classes
iv-badge plus --primary --success --warning --danger --info (subtle background, coloured text) and --solid (filled). Without a variant the badge is neutral.
Common mistakes
- Using a badge as a button; use
iv-button--sminstead. - Conveying state by colour only: include a word such as “Paid”.
Class index
Parts and modifiers of this family that the examples above do not show. The full list per stylesheet lives in the reference.
| Class | What it does |
|---|---|
iv-badge--primary | Primary tone. |
iv-badge--info | Informative tone. |
iv-badge--success | Success tone. |
iv-badge--warning | Warning tone. |
iv-badge--danger | Danger tone. |
iv-badge--solid | Filled variant: the tone becomes the background instead of the tint. |