Also known as:
TagChipLabelPillLozenge

Badge

Badges show the count of some adjacent data. A dot badge notifies the user that something is new or updated without showing a count.

AnchorNeed to know

  • For numerical counts, use a badge.
  • Use a “pop” animation style when badge numbers increase.

Visuals

UI Kit

Examples

Options

  • Known or unknown number:
    • Number badge
    • Dot badge

To keep in mind

We want to draw attention to a specific value

  • The badge text can be a number or a number with text like “10x” for a multiplier

When to use

  • Use badges for counts of important information, close to the relevant item.
  • A dot badge notifies the user that something is new or updated without showing a count, such as an “unread report”, or activity notification. It may be useful as a less prominent badge, even when the count is known.
  • Use badges to notify or draw attention to changed values or status.
  • Use a “pop” animation style when badge numbers increase.

When not to use

  • If you need a text label, use tags instead

See also

External Links

Here are some examples of other existing design systems: