Component

Badge

Published on

Description

The Badge component displays a small label, typically used to show a count, status, or short descriptor. Badges are rendered as inline <span> elements with the .badge class.

Use badges to highlight notification counts, item quantities, or status indicators. Avoid using badges for long text; use a Tag or Alert instead.

Example

Open in new tab
View HTML markup 
  <span class="badge">3</span> <span class="badge">New</span> <span class="badge">99+</span>

Accessibility

  • Badges are rendered as <span> elements with no implicit ARIA role.
  • Screen readers will read the badge text inline with surrounding content.
  • For dynamic counts, consider wrapping the badge in an aria-live region so updates are announced.

References

  • Tag — for labelling and categorization with links
  • Alert — for important messages that need user attention

Variables

None