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

• Tag

External Links

Here are some examples of other existing design systems:

• Ant Design: badge
• Ant Design: feedback
• Quickbooks: numeric badges
• Apple Human Interface Guidelines: notifications and badging
• Material: badge
• Semantic UI: label