Skip to content


  • Stable
  • Not reviewed for accessibility

Use the Counter component to add a count to navigational elements and buttons. Counters come in 3 variations:

  1. the default Counter,
  2. the Counter--primary with a stronger background color
  3. and Counter--secondary with a more subtle text color.

Note: When a counter is empty, its visibility will be hidden.

Use the Counter in navigation to indicate the number of items without the user having to click through or count the items, such as open issues in a GitHub repo. See more options in navigation.

You can also have icons and emojis in counters. Or use utilities for counters with different background colors.

Edit this page on GitHub
1 contributorsimurai
Last edited by simurai on December 16, 2022