Documentation and examples for badges, our small count and labeling component.
Badges can be used as part of links or buttons to provide a counter.
# Contextual variations
Add any of the below mentioned modifier classes to change the appearance of a badge.
# Pill badges
pill prop to make badges more rounded (with a larger border-radius and additional horizontal padding).
Useful if you miss the badges from v3.
Using the contextual badge component
together with the
tag prop in order to switch to your desired html element.
tag="a" will transform the badge into an
anchor with hover and focus states.
size="lg" props to adjust badge sizes.
# Badge Slots
|default||Default content for the badge|