Badge

A badge is a read-only visual indicator for numeric values. It is often used in other components to show for example a number of elements contained in that component.

Type Component

Tier Global

Documentation Status Minimal

Last Edited 13/02/2026

Open in Figma View on GitHub

Usage

A badge is a read-only visual indicator for numeric values. As such only numbers should be used in the badge. An exception is using non numeric characters to show larger numbers than can be shown in the width of the badge. For example using a “+” to indicate a larger number such as “999+” or using letters to indicate larger numbers such as “2M” or “25k”.

It is often used in other components to show for example a number of elements contained in that component. Such as in Tabs to indicate the amount of elements contained inside of it, or in a Chip to for example indicate the amount of items which fall under that filter.

When to use

• If you need to indicate a specific numeric value and you want to give it visual prominence. For example for:
• • Unread messages
  • Amount of items requiring attention
  • Activity indicators (e.g. comments)
  • Inventory counts
  • Total items in collections (items in cart)
  • Performance metrics (e.g. amount of errors in a log)
• As part of other components such as Navigation items, Chips , Tabs etc. to show some of the above mentioned metrics

When not to use

• Do not use the badge to show non-numeric values. Use for example a Chip instead.
• Do not use for complex data that needs context
• Do not use the badge as an interactive element users can take an action with. If your users need to take action on the shown numeric values then provide other means of taking action. For example if the badge shows the amount of unread Notifications show it for example in a Navigation  item with which user can go to the Notification center to take action.