Badge
Compact status and category chips that share the button's data-variant vocabulary.
Badges use the .badge class. Pick a color with data-variant; the default variant is
the absence of the attribute. Use data-size="icon" for a square, icon-only chip. A badge is
often a static <span>, but put it on a <button type="button"> or <a href> when it is
interactive — those get hover/active tints, a :disabled / [aria-disabled="true"] muted state
at opacity 0.5, and a progress cursor under [aria-busy="true"].
Variants
<div class="flex items-center gap-sm"> <button type="button" class="badge">Category</button> <button type="button" class="badge" data-variant="primary">New</button> <button type="button" class="badge" data-variant="muted">Draft</button> <button type="button" class="badge" data-variant="ghost">Inline</button> <button type="button" class="badge" data-variant="link">Posts</button></div>Icon
An icon-only badge needs an accessible name: include a <span class="sr-only"> label alongside
the <svg>.
<button type="button" class="badge" data-size="icon"> <span class="sr-only">Icon badge default</span> <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <circle cx="128" cy="128" r="12" /> <circle cx="196" cy="128" r="12" /> <circle cx="60" cy="128" r="12" /> </svg></button><button type="button" class="badge" data-size="icon" data-variant="primary"> <span class="sr-only">Icon badge primary</span> <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <circle cx="128" cy="128" r="12" /> <circle cx="196" cy="128" r="12" /> <circle cx="60" cy="128" r="12" /> </svg></button><button type="button" class="badge" data-size="icon" data-variant="muted"> <span class="sr-only">Icon badge muted</span> <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <circle cx="128" cy="128" r="12" /> <circle cx="196" cy="128" r="12" /> <circle cx="60" cy="128" r="12" /> </svg></button><button type="button" class="badge" data-size="icon" data-variant="ghost"> <span class="sr-only">Icon badge ghost</span> <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <circle cx="128" cy="128" r="12" /> <circle cx="196" cy="128" r="12" /> <circle cx="60" cy="128" r="12" /> </svg></button>API
| Attribute | Values |
|---|---|
data-variant | primary, muted, ghost, link (omit = default) |
data-size | icon |
Need a status badge (info / success / warning / destructive)? Override the tokens on an
instance, e.g. style="--badge-background: var(--success); --badge-foreground: var(--success-foreground)".