Vue

Counter

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.

Examples

Counter

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.

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.

Playground