Usage guidelines outline how the component should and shouldn’t be used in different user interface contexts.
When to use
- Adding count to an associated item (numbers and slashes only)
When not to use
- Portraying non-numeral item characteristics (use Badge instead)
- Portraying entity status (use Status Badge instead)
Best practices
Do place the Counter Badge in the vicinity of the object it’s referring to.
Do use the comma thousands separator for counts greater than 999.
Do use the outlined variant of the Counter Badge when using multiple badges near to each other.
Don’t display the badge if the count of items is zero.
Don’t mix multiple types of Badges next to each other.