<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Count

Numeric message indicating an amount.

Counts are numeric messages that indicate a quantity.

Skins

The preview has been updated.

Samples

The preview has been updated.

Best practices

  • Counts should be no more than two digits.
  • Counts are used to indicate the number of items in your cart, saved items in a gallery, times liked, tweeted, rated, reviewed, etc.
  • Use the "alert" skin to call particular attention and encourage action.

Accessibility

  • Users on assistive devices may not have the full context for what the count number represents. Consider adding visually hidden text inside of the Count if the context isn't already clear. For instance, if a Count of 4 represents 4 items in the cart, add the visually hidden text "Items" after the number.

Props

Count
This component is implemented using the <span /> as the root element. You can utilize the native attributes supported by <span /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
proptyperequireddescriptiondefault
skin"standard" | "alert" | nullfalse
which skin to use. Standard uses the vista blue and Alert uses the red alert color
standard