Basic badge styling
Primary badge
Primary
Primary To use, add
.badge-primary
to the base .badge
classSecondary badge
Secondary
secondary To use, add
.badge-secondary
to the base .badge
classInfo badge
Info
Info To use, add
.badge-Info
to the base .badge
classSuccess badge
Success
Success To use, add
.badge-Success
to the base .badge
classDanger badge
Danger
Danger To use, add
.badge-Danger
to the base .badge
classWarning badge
Warning
Warning To use, add
.badge-Warning
to the base .badge
classLight badge
Light
Light To use, add
.badge-Light
to the base .badge
classDark badge
Dark
Dark To use, add
.badge-Dark
to the base .badge
classDot badges
Ring badges
Pill
Text
7
+7
-7
10
Mono colors
Dark
Grey
Secondary
Sizing
Extra large
Large
Medium
Small
Default badge
Default
Dark
Red
Green
Yellow
Indigo
Purple
Pink
Bordered badge
Default
Dark
Red
Green
Yellow
Indigo
Purple
Pink
Pills badge
Default
Dark
Red
Green
Yellow
Indigo
Purple
Pink
Pills badge
Default
Dark
Red
Green
Yellow
Indigo
Purple
Pink
Badges as links and with icon
Notification badge
Button with badge
Badge with icon only
Icon description
Icon description
Icon description
Icon description