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.Show a notification dot
Use dot for a label-less indicator (unread state, presence, activity). text and iconCode are ignored while dot is set.
<template>
<UiBadge variant="danger" dot />
</template>
Cap a numeric count with max
When text is numeric, max caps the displayed value and appends a +, e.g. 120 with max="99" renders 99+.
<template>
<UiBadge variant="danger" pill text="120" :max="99" />
</template>
Attach a badge to a corner
Use attached to overlay the badge on the top-end corner of a parent element — pairs well with avatars, icon buttons, or tabs. The parent must be positioned; use the colorffy-css .position-relative utility.
<template>
<div class="position-relative d-inline-block">
<UiAvatar src="/avatar.jpg" />
<UiBadge variant="success" dot attached />
</div>
</template>
attached only sets position: absolute on the badge itself — the wrapping element needs .position-relative (or its own position: relative) for the overlay to anchor correctly.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). |
dot | boolean | null | false | Renders a label-less notification dot; ignores text / iconCode. |
max | number | null | — | Caps numeric text at this value, rendering {max}+ when exceeded. |
attached | boolean | null | false | Overlays the badge on the top-end corner of a .position-relative parent. |
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. |