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.


Badges have a colorful, bold, and filled style that makes them stand out when appearing within or next to another component.

Use a badge to highlight the count.
Use a tag to show metadata. It is usually text content. A tag can contain a badge.


Over 99

When a badge needs to display a number above 99, use “99+” instead of the number. Only show a number over 99 if it is essential to the user’s objectives and you are certain there is room in the design to accommodate it.

Info 99+item. Warning 99+items.


Badges can contain a variety of colors. Use traffic-light colors to display a sense of urgency or indicate state.

1item. 1item. 15items. 2items. 3items. Info2items. Success3items. Warning12items. Danger15items.