Ready

Counter

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

Ready

Counter

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

Ready

Counter

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

Variants

Variants

Variants

  1. Default

  2. Light

  3. Dark

  4. With Border

Best Practices

Best Practices

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

More

More

Additional Reading

  1. Indicators, Validations, and Notifications: Pick the Correct Communication Option https://www.nngroup.com/articles/indicators-validations-notifications/

© 2025 Basis Technologies
© 2025 Basis Technologies
© 2025 Basis Technologies