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.
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.