# Badge
Documentation and examples for badges, our small count and labeling component.
# Example
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
Use the pill
prop to make badges more rounded (with a larger border-radius and additional horizontal padding).
Useful if you miss the badges from v3.
# Links
Using the contextual badge component
together with the tag
prop in order to switch to your desired html element.
Providing tag="a"
will transform the badge into an anchor
with hover and focus states.
# Sizes
Use the size="md"
or size="lg"
props to adjust badge sizes.
# Props
# Badge Slots
Slot | Description |
---|---|
default | Default content for the badge |