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.
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.
Badges can contain a variety of colors. Use traffic-light colors to display a sense of urgency or indicate state.