Badges

What is a badge?

A badge is a small label that adds context to another element: a count of unread messages, a "New" or "Sale" tag, a status such as "Active" or "Overdue", or a removable chip in a filter bar. Badges, tags, pills and chips all belong to this family. They are tiny, but they carry a lot of meaning, which makes clear styling and accessibility important.

When to use badges

• Counters on icons and nav links, such as notifications or cart items.
• Status indicators in tables and lists: paid, pending, failed, archived.
• Tags and categories on blog posts, products and tickets.
• Chips for selected filters or multi-select values, often with a remove button.

Best practices

• Keep the text short, ideally one or two words.
• Do not rely on colour alone to convey status; the label text should make sense in greyscale.
• Check contrast for small text, especially on light tints like pale yellow or green.
• A count badge on an icon button needs context for screen readers, for example a visually hidden "unread messages" next to the number.
• Removable chips need a real <button> with an aria-label such as "Remove filter: Red".
• Use aria-live="polite" only if a counter changes while the user is on the page and the change matters.
• Avoid using badges as links unless they really navigate somewhere; if they do, give them a visible focus style.

Framework versions

This category includes pill badges, dot indicators, outlined tags, notification counters and dismissible chips. Bootstrap 6 versions use the theme-* colour roles, so a "danger" or "success" badge adapts to light and dark themes. Bootstrap 5 versions build on .badge with rounded-pill and background utilities, Tailwind CSS versions use small padding, text-xs and colour utilities, and pure CSS badges are a few lines you can drop into any project. Preview each one live, switch between code tabs and copy the markup into your interface.