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.

Use a badge to highlight the count.

vs

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

Recommendations

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.

Color

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.