Badges

Activity Messages FAQ Support

Basic badge styling

Primary badge
Primary
Primary To use, add .badge-primary to the base .badge class
Secondary badge
Secondary
secondary To use, add .badge-secondary to the base .badge class
Info badge
Info
Info To use, add .badge-Info to the base .badge class
Success badge
Success
Success To use, add .badge-Success to the base .badge class
Danger badge
Danger
Danger To use, add .badge-Danger to the base .badge class
Warning badge
Warning
Warning To use, add .badge-Warning to the base .badge class
Light badge
Light
Light To use, add .badge-Light to the base .badge class
Dark badge
Dark
Dark To use, add .badge-Dark to the base .badge class
Transparent badge
Transparent
Transparent To use, add .badge-Transparent to the base .badge class

Pill

Text 7 +7 -7 10
.badge-pill applies to .badge.

Mono colors

Dark Grey Secondary
.badge-* which * is one of the following color names.

Sizing

Extra large Large Medium Small
Available sizes are sm, lg, xl

Dot badges




.badge-dot applies to .badge.

Ring badges

.badge-ring applies to .badge.






.fill can applies to .badge-ring