Skip to main content Skip to navigation Skip to search

Badges are status modifiers to other elements which display the numerical value within an element either next to it or inside the element itself.

Usage

Badges have a colorful, bold, and filled style that makes them stand out when appearing within or next to another component. Badges are also small enough to fit next to or within another element.

  • Use a badge to highlight the count. Badge can be used in a label as count relating to the metadata.
  • Use a label to show metadata. It is usually text content

Anatomy

Basic

Overall Style

Badges have a more rounded border radius, similar to labels, to distinguish them from primary buttons.

Badges are also small enough to fit next to or within another element.

Color

You can use different colors in badges.

Stoplight colors are reserved to display a sense of urgency or indicate state.

Notifications 12
Alerts 12

Content

Use integers within badges. If you’re attempting to use text, consider using a label instead.

Over 99

If a badge needs to display a number above 99, use “99+” instead of the number unless the number is important to the user’s objectives and you are certain there is room in the design to accommodate it.

London (Location) 14 Austin (Location) 99+

Code & Examples

Color Options

1 15 2 3 12 90 51 25 32 57

Status Options

2 3 12 15