Ready
Counter
Counters contain dynamic number values. Counters help users quickly identify quantities of non-visible items.
Details

Default
Light
Dark
With Border
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/