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.
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.