Badge

Purpose

A badge attaches a short, scannable piece of metadata to a piece of content. It is always read-only — never interactive — and should never be the sole carrier of critical information, because colour alone does not convey meaning to everyone.

Badge has two distinct colour systems that map to two use cases:

General tones (neutral, brand, info, success, warning, danger) are for status indicators and metadata labels — a booking confirmation state, a filter chip count, an "on hold" tag. These follow a semantic colour convention and support a status dot.

Kuoni product variants (promotion, exclusive, featured, sold-out, new, offer) are for promotional overlays and product callouts — card image stamps, "Save up to 30%" banners, "Kuoni Exclusive" corner stamps. They use brand-specific colours and are not dot-eligible.

Usage

Reach for Badge when you need a compact, read-only piece of metadata attached to content — a status, category, or promotional stamp. If the label needs to be tappable or toggled (a filter the user selects), use Chip instead; Badge never carries interaction.

Badges appear inline next to text (a status label beside a booking reference) or as an absolutely-positioned overlay on a card image (a promotional stamp in the corner).

Anatomy

Variants

General tones

Use these for status, state, and metadata. Each tone has a defined semantic meaning — do not repurpose a tone for a different meaning (e.g. do not use danger for a promotional label).

---

Kuoni product variants

Use these for promotional content on offer cards, holiday tiles, and search results. They carry bolder, higher-contrast colours to stand out against imagery and card surfaces.

Shapes

Three shape variants let the badge adapt to its placement context.

Tip: Use shape="square" or shape="stamp" with absolute positioning over a card's image — e.g. absolute top-3 left-3.

Sizes

With status dot

Add dot to a general-tone badge to show a 6 px filled circle before the label. Use this for live or streaming states — booking confirmed, payment processing — where the dot signals something is actively in a given state.

The dot prop has no effect on Kuoni product variants (promotion, exclusive, featured, sold-out, new, offer).

Best practices

Props

Accessibility

Static vs dynamic badges

Most badges are static — they render with the page and do not change. For these, no ARIA role is needed; the surrounding content provides context.

For badges that update dynamically in response to user action or data — for example, a count badge on a filter chip that updates when results load — add role="status" and aria-live="polite" so assistive technology announces the change:

{/* Dynamic badge — announces update */}
<Badge variant="info" role="status" aria-live="polite">
  3 results
</Badge>

{/* Static badge — no ARIA role needed */}
<Badge variant="success">Confirmed</Badge>

Colour and meaning

Every badge tone conveys meaning through colour. Because colour alone is not perceivable by everyone, the label text must always carry the same meaning independently. Do not use a badge where the label text is empty or generic (e.g. "●") and colour is the only signal.

Contrast

All general-tone combinations meet WCAG 2.1 AA for normal text (4.5:1). All Kuoni product variants use full-saturation backgrounds with white or dark #1A1A1A text and meet or exceed AA at the smallest badge size (10 px semi-bold).

Related components

• Chip — use instead of Badge whenever the label needs to be tappable or toggled.
• Pill — a related compact label component; see that page for the distinction from Badge.
• NotificationBadge — the count/dot indicator variant of the small-label family, typically anchored to an icon.