Badge

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>

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>

Props

CSS variables

Set these on :root, or on any wrapper to restyle only the badges inside it. Color variants (primary, success, tonal, …) keep their own colors, and pill, sm and dot badges their own size.

:root {
  --cffy-badge-radius: var(--cffy-radius-sm);
  --cffy-badge-font-weight: var(--cffy-fw-700);
}