Components
Badge
Label and categorize with UiBadge, or show counts with UiBadgeGroup.
UiBadge renders a small status or category label. Group several with UiBadgeGroup.
Add a badge
<template>
<UiBadge text="New" variant="primary" />
<UiBadge text="Beta" variant="accent" />
<UiBadge text="Stable" variant="success" />
</template>
Use tonal and outline variants
<template>
<UiBadge text="Info" variant="tonal tonal-info" />
<UiBadge text="Draft" variant="outline" />
</template>
Show a count or initial as a pill
Reserve pill for numbers and single initials — the capsule shape reads best on short, glyph-like content.
<template>
<UiBadge text="9" variant="danger" pill />
<UiBadge text="GG" variant="neutral" pill />
</template>
Don't use
pill on full-word labels like "Active" or "Pending" — keep those as the default (non-pill) shape.Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | null | — | Badge label. |
variant | 'primary' | 'secondary' | 'accent' | 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'gradient' | 'default' | 'outline' | 'tonal tonal-<intent>' | — | Color / style preset. |
size | 'sm' | — | Smaller size (only sm supported). |
pill | boolean | null | — | Fully rounded capsule (numbers / initials only). |
iconCode | string | null | — | Leading Material Symbols code point. |
iconClass | string | string[] | Record<string, boolean> | null | — | Classes for the icon. |
customClass | string | string[] | Record<string, boolean> | null | — | Extra classes. |