Variants
Default
Light
Dark
With Border
Best Practices
1. Numbers
Counters should only contain numbers.
2. Usage
Counters should have a clear connection to the non-visible items they represent.
3. Count Cap
Counters should have the option to cap the number count. And "+" should be use to indicate additional items.
More
Accessibility
Color contrast ratio for our Counter components meets AA standards, based on Web Content Accessibility Guidelines (WCAG) guidelines.
Benefits: People with low vision often have difficulty reading text that does not contrast with its background. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a minimum luminance contrast ratio between the text and its background can make the text more readable even if the person does not see the full range of colors. It also works for the rare individuals who see no color.¹
Additional Reading
Indicators, Validations, and Notifications: Pick the Correct Communication Option https://www.nngroup.com/articles/indicators-validations-notifications/