Ready
Counter
Counters contain dynamic number values. Counters help users quickly identify quantities of non-visible items.
Details
Default
Light
Dark
Warning
Alert
With Border
Small
Best Practices
1
Numbers
Counters should only contain numbers.
Do
Don't
2
Usage
Counters should have a clear connection to the non-visible items they represent.
Do
Don't
More
Additional Reading
Indicators, Validations, and Notifications: Pick the Correct Communication Option https://www.nngroup.com/articles/indicators-validations-notifications/