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/

Need more guidance?

Suggest an addition or an edit.

Need more guidance?

Suggest an addition or an edit.

Need more guidance?

Suggest an addition or an edit.

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