CRMHQ Admin - Dashboard Badges

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

Dot badges

.badge-dot applies to .badge.

Ring badges

.badge-ring applies to .badge.

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

Default badge

Default Dark Red Green Yellow Indigo Purple Pink

Available sizes are xs, sm, base, lg, xl, 2xl, 3xl, 4xl

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

Badge link Badge link 3 days ago 2 minutes ago

Badges

Basic badge styling

Dot badges

Ring badges

Pill

Mono colors

Sizing

Default badge

Bordered badge

Pills badge

Pills badge

Badges as links and with icon

Notification badge

Button with badge

Badge with icon only