Badges

ActivityMessagesFAQSupport

Basic badge styling

Primary badge
Primary
Primary To use, add .badge-primaryto the base .badgeclass
Secondary badge
Secondary
secondary To use, add .badge-secondaryto the base .badgeclass
Info badge
Info
Info To use, add .badge-Infoto the base .badgeclass
Success badge
Success
Success To use, add .badge-Successto the base .badgeclass
Danger badge
Danger
Danger To use, add .badge-Dangerto the base .badgeclass
Warning badge
Warning
Warning To use, add .badge-Warningto the base .badgeclass
Light badge
Light
Light To use, add .badge-Lightto the base .badgeclass
Dark badge
Dark
Dark To use, add .badge-Darkto the base .badgeclass
Transparent badge
Transparent
Transparent To use, add .badge-Transparentto the base .badgeclass

Pill

Text7+7-710
.badge-pillapplies to .badge.

Mono colors

DarkGreySecondary
.badge-*which *is one of the following color names.

Sizing

Extra largeLargeMediumSmall
Available sizes are sm, lg, xl

Dot badges




.badge-dotapplies to .badge.

Ring badges

.badge-ringapplies to .badge.






.fillcan applies to .badge-ring