Badge

GuidelinesReact

When to use

  • To call attention to details in a way that makes it easy to scan.
  • To present information, such as status.

When not to use

  • If there’s an interaction (such as add/remove)—use a tag.
  • If the entire message has an associated action—use an alert.
  • For a circled badge for notifications—use a notification badge

Component status

Released
Released
Released
Released

Content structure

Behavior

Display static info

Support with icons

Content

Keep it short

Look & feel

Badge types

Neutral badges

White badges

Info badges

Success badges

Warning badges

Critical badges