Design Pattern

Badge

A badge is a compact label used to display supplemental information such as status, category, or counts. It is important to convey meaning with text and icons rather than relying on color alone.

Difficulty: Beginner Category: Data Display

When to use / not use

Use it when

  • When you want to show a status briefly, such as published, draft, or error
  • When you want to classify items with categories or tags
  • When you want to overlay notification counts or unread counts on an icon

Don't use it when

  • When the text is long → badges work best as short labels
  • When the element is interactive → use a button or link instead
  • When color alone carries the meaning → always provide text as well

Anatomy

1 Badge container (span)
2 Label text
3 Status indicator (color or icon)
4 Count display
  1. Container — Typically implemented as an inline span. Consider aria-label when the information is meaningful on its own
  2. Label — Communicate meaning with text, not just color. Keep it short and clear
  3. Count — If the value changes dynamically, announce updates with aria-live

HTML Structure

Key points

  • Implement badges with a span element and add aria-label where the context requires it
  • When color carries meaning, provide the same information in text too
  • Use aria-live="polite" for dynamic counts so updates are announced
  • Hide purely decorative badges from assistive technology with aria-hidden="true"

CSS Implementation

Styling points

  • Size — Keep it compact so it does not overpower the surrounding text
  • Color — Use consistent colors per status and maintain sufficient contrast
  • Shape — A pill shape (border-radius: 999px) is common
  • Placement — Count badges are often placed at the top-right of an icon with absolute positioning

Accessibility

WCAG 1.4.1 Use of Color

Do not communicate meaning with color alone. Supplement it with text or icons.

WCAG 1.4.3 Contrast

Badge text and background need a contrast ratio of at least 4.5:1.

WCAG 4.1.3 Status Messages

Dynamic counts or status changes should be announced with aria-live.

Keyboard operation

  • A badge itself is not interactive, so it usually should not receive focus
  • If the badge is a removable tag, make sure the remove button is focusable
  • Badges attached to links or buttons should be announced as part of the parent element

Live Demo

Status badges

A basic badge pattern that conveys state with color and text.

PreviewFullscreen

Count badges

A pattern that overlays notification counts or unread counts on an icon.

PreviewFullscreen

Tag badges

A removable tag-style badge for categories or filter selection.

PreviewFullscreen

Common mistakes

Using color alone to distinguish status

Users with color-vision differences may not be able to tell them apart. Provide text too.

Making badge text too long

Badges are for short labels. Put longer explanations in tooltips or nearby content.

Count updates are not announced

If you change the value with JavaScript without aria-live, assistive technology may not notice.