Badges
Solid
Use .badge-{color} to apply these variant.
Primary
Secondary
Success
Info
Warning
Danger
Dark
Light
Label
Use .badge-label-{color} to apply these variant.
Primary
Secondary
Success
Info
Warning
Danger
Dark
Light
Outline
Use .badge-outline-{color} to apply these variant.
Primary
Secondary
Success
Info
Warning
Danger
Dark
Light
Pill badges
Use the .rounded-pill modifier class to make badge element more rounded.
Primary
Secondary
Info
Button
Badges can be used as part of links or buttons to provide a counter.
Positioned
Badges can be used as part of links or buttons to provide a counter.
New alerts
19+
unread messages
Icon Badges
Status badges can be used to highlight payment states, order progress, or other key updates.
Paid
Declined
Pending
Refunded
Shaped badges
Make your badge to a circle or square shape by adding .badge-{circle|square} modifier classes.
Circle
A
B
C
D
Square
A
B
C
D
Header
Badges scale to match the size of the immediate parent element by using relative font sizing and em units