BASIC
Add class .badge-[value]
| Value | Demo |
|---|---|
| primary | Primary |
| success | Success |
| danger | Danger |
| warning | Warning |
| info | Info |
| dark | Dark |
| secondary | Secondary |
| purple | Purple |
| cyan | Cyan |
| pink | Pink |
| brown | Brown |
| light | Light |
PILL
Add class .badge-pill
| Title | Demo |
|---|---|
| primary | Primary |
| success | Success |
| danger | Danger |
| warning | Warning |
| info | Info |
| dark | Dark |
| secondary | Secondary |
| purple | Purple |
| cyan | Cyan |
| pink | Pink |
| brown | Brown |
| light | Light |
OUTLINE
Add class .badge-outline
| Title | Demo |
|---|---|
Primary |
Primary |
success |
Primary |
danger |
Primary |
warning |
Primary |
info |
Primary |
dark |
Primary |
secondary |
Primary |
purple |
Primary |
cyan |
Primary |
pink |
Primary |
brown |
Primary |
light |
Primary |
SHADOW
Add class .badge-shadow
| Title | Demo |
|---|---|
| primary | Primary |
| success | Success |
| danger | Danger |
| warning | Warning |
| info | Info |
DOTTED
Add class .badge-dot or .badge-dot-outline
| Outline | Filled |
|---|---|
LABELS
Add class .label-[value]
| Value | Demo |
|---|---|
| primary | Example New |
| success | Example New |
| danger | Example New |
| warning | Example New |
| info | Example New |