A small label for a status, a count or a category, built on the pill.
Example
import { Badge } from "@elements/ui/badge";
import { Icon } from "@elements/ui/icon";
<Badge>Draft</Badge>
<Badge variant="success" dot>Active</Badge>
<Badge variant="primary" icon="inline-start"><Icon name="check" /> Verified</Badge>
<Badge href="/changelog" variant="outline" icon="inline-end">What's new <Icon name="arrow-right" /></Badge>
Parts
| Part |
What it is |
.badge.pill |
The span or link. Usable without the template: class="badge pill is-success". |
.pill-dot |
The status dot. |
Attributes
| Attribute |
Type |
Default |
Description |
variant |
"primary" | "secondary" | "outline" | "ghost" | "link" | "danger" | "success" | "warning" | "info" | "accent" |
"primary" |
Look and intent. The status variants are the base pill intents. |
dot |
boolean |
false |
A leading status dot in the variant's color. |
href |
string |
"" |
Renders an <a>: a badge that links. |
icon |
"" | "inline-start" | "inline-end" |
"" |
The side an icon sits on; that side gets the tighter padding. |
class |
string |
"" |
Extra classes; custom colors go here. |
attrs |
Record<string, string | number | boolean | undefined> |
{} |
Any other attributes: id, title, aria-label, target, rel, data-*. |
Slots
| Slot |
Content |
default |
The label. An <Icon> or <Spinner> on either side of the text is sized and spaced for you. |
Keyboard
| Keys |
Action |
Tab |
Focuses a link badge; a plain badge is not focusable. |
Enter |
Follows a link badge. |
Data attributes
| Attribute |
Values |
On |
data-variant |
the variant |
root |
aria-invalid |
"true": a danger border, and a danger ring on focus |
root |
Accessibility
- A badge is text, with no role. A link badge is a native
<a>, focusable with a visible focus ring.
- The dot is aria-hidden: the label carries the meaning, never the color alone.
- Give a number-only badge a name through attrs, such as aria-label="8 unread".
See also