Badge

Status indicators that show notifications, or state on top of another element.

Install

Examples

Status

Seven statuses set the badge colour to match its meaning.

Default Info Warning Negative Positive Mono Disabled

With icons

An icon reinforces the status at a glance.

Info Success Warning

Guidelines

Usage

status labels, category tags, notification counts, and feature flags.

Do

  • Keep labels to one or two words.
  • Match the status colour to its meaning — positive for success, negative for errors.
  • Always pair the colour with a clear text label.

Don’t

  • Don’t use a badge for an interactive action — use a Button or Tag.
  • Don’t rely on colour alone to carry the meaning.
  • Don’t crowd a view with many competing badges.

Accessibility

Properties

Related