previously Vue Storefront Build Better Storefronts


SfCounter provides formatting for numerical values. This can be used to show things like quantities of an item or number of reviews. Since it's a part of so many complex components, SfChip can be used to provide consistent styles across your application.



By default, SfCounter will put parentheses around its children.

SfCounter supports 6 different sizes that can be set with the size prop: '3xs', '2xs', 'xs', 'sm', 'base', and 'lg'. The default size is 'base'.

Counter pill

SfCounter accepts a pill prop that will create a border around your counter rather than adding parentheses around it.

Customizing Colors

You can customize the colors of SfCounter by passing Tailwind classes.

Accessibility notes

The root element of SfCounter is a <span>. Since a <span> is an inline element, you should avoid placing block elements (like div or p) inside of it.