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




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

Badge link Badge link 3 days ago 2 minutes ago

Notification badge

Button with badge

Badge with icon only

Icon description Icon description Icon description Icon description
Mayra Sibley

2 Hours

Hi there, I'm Jesse and you?
You

3 minutes

My name is Anne Clarc.
Mayra Sibley

40 seconds

Nice to meet you Anne.
How can i help you?