Badges
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.
Default
Primary
Secondary
Info
Success
Danger
Warning
Pill badges
Use the .badge-pill
modifier class to make badges more rounded (with a larger border-radius
and additional horizontal padding
). Useful if you miss the badges from v3.
Default
Primary
Secondary
Info
Success
Danger
Warning
Links
Using the contextual .badge-*
classes on an <a>
element quickly provide actionable badges with hover and focus states.
Sizes
Use the .badge-md
or .badge-lg
modifier classes to adjust badge sizes.
Default
Medium
Large badge