Badges and badge pills
Badge component allows you to easily highlight new or unread items, notify users about some useful information and mark items depending on the priority by adding
<span class="badge" />and/or <span class="badge badge-pill" />to links, navigation, buttons, Bootstrap navs, and more. Table below contains different options and styling available for badges and badge pills.
| Basic badge styling | ||
|---|---|---|
| Primary badge | Primary |
Primary contextual alternative. To use, add .badge-primaryto the base .badgeclass
|
| Secondary badge | Secondary |
Primary contextual alternative. To use, add .badge-secondaryto the base .badgeclass
|
| Danger badge | Danger |
Danger contextual alternative. To use, add .badge-dangerto the base .badgeclass
|
| Success badge | Success |
Success contextual alternative. To use, add .badge-successto the base .badgeclass
|
| Warning badge | Warning |
Warning contextual alternative. To use, add .badge-warningto the base .badgeclass
|
| Info badge | Info |
Info contextual alternative. To use, add .badge-infoto the base .badgeclass
|
| Light badge | Light |
Light contextual alternative. To use, add .badge-lightto the base .badgeclass
|
| Dark badge | Dark |
Dark contextual alternative. To use, add .badge-darkto the base .badgeclass
|
| Transparent badge | Transparent |
Transparent contextual alternative. To use, remove background color class from the .badgecontainer
|
| Custom badge color | Purple |
Add one of availablecustom background colors. To use, add .bg-*color class to the .badgeelement
|
| Basic badge options | ||
| Roundless badge | Roundless badge |
This badge doesn't have rounded borders. To use, add .badge-roundlessclass to the .badgeelement
|
| Block badge | Block badge |
This badge fills 100% width of a parent element. To use, add .badge-blockclass to the .badgeelement
|
| Linked badge | Linked badge |
You can also use badges as a link in an <a>element
|
| Label with dropdown | Dropdown menu attached to the badge with optional caret | |
| Icon in badge |
Label with icon. To use, add icon and .badge-iconclass to the badge
|
|
| Icon in linked badge |
Linked badge with icon. To use, add icon and .badge-iconto the link
|
|
| Icon in rounded badge |
Rounded linked icon. Usage is the same, but with additional .rounded-circleclass
|
|
| Icon in linked rounded badge | The same as above, but inside link element | |
| Striped badges | ||
| Default badge | Default |
Basic striped badge. To use with default badge and .badge-stripedclass
|
| Primary badge | Primary |
Primary contextual alternative. To use with primary badge and .badge-stripedclass
|
| Danger badge | Danger |
Danger contextual alternative. To use with danger badge and .badge-stripedclass
|
| Success badge | Success |
Success contextual alternative. To use with success badge and .badge-stripedclass
|
| Warning badge | Warning |
Warning contextual alternative. To use with warning badge and .badge-stripedclass
|
| Info badge | Info |
Info contextual alternative. To use with info badge and .badge-stripedclass
|
| Custom border color | Violet | Striped badge with one of availablecustom border colors |
| Striped badge options | ||
| Right border | Right border |
To highlight right border instead of left, add .badge-striped-rightclass
|
| Linked badge | Linked badge |
Linked striped badge. Use .badge-stripedand other badge classes in <a>element
|
| Label with dropdown | Dropdown menu attached to the striped badge with optional caret | |
| Icon in striped badge |
Icon inside striped badge. To use custom border color, add .border-*custom border color class. Available in 5 sizes
|
|
| Icon in linked striped badge | Linked icon inside striped badge | |
| Flat badges | ||
| Primary badge | Primary |
Flat badge in primary contextual alternative. To use with primary color classes and .badge-flatclass
|
| Secondary badge | Secondary |
Flat badge in secondary contextual alternative. To use with grey color classes and .badge-flatclass
|
| Danger badge | Danger |
Flat badge in danger contextual alternative. To use with danger color classes and .badge-flatclass
|
| Success badge | Success |
Flat badge in success contextual alternative. To use with success color classes and .badge-flatclass
|
| Warning badge | Warning |
Flat badge in warning contextual alternative. To use with warning color classes and .badge-flatclass
|
| Info badge | Info |
Flat badge in info contextual alternative. To use with info color classes and .badge-flatclass
|
| Dark badge | Dark |
Flat badge in dark contextual alternative. To use with dark grey color classes and .badge-flatclass
|
| Custom badge color | Pink |
To use custom border and text colors, add border-*and text-*color classes to the .badge
|
| Flat badge options | ||
| Roundless badge | Roundless badge |
This badge doesn't have rounded borders. To use, add .badge-roundlessclass to the .badgeelement
|
| Linked flat badge | Linked badge |
Use .badge-flatand other badge classes in <a>element
|
| Block badge | Block badge |
To make flat badge full width, use .badge-blockclass. Works with linked badges as well
|
| Flat badge with dropdown | Dropdown menu attached to the flat badge with optional caret | |
| Icon in flat badge |
Icon inside flat badge. To use, add icon and .badge-iconclass to the badge
|
|
| Icon in linked flat badge |
Icon inside linked flat badge. To use, add icon and .badge-iconto the link
|
|
| Icon in flat rounded badge |
Icon inside rounded flat badge. To use, add .rounded-circleclass
|
|
| Icon in linked rounded badge | The same as above, but inside link element | |
| Pill badges | ||
| Primary pill badge | 32 |
Primary contextual alternative. To use, add .badge-primaryto the badge element
|
| Secondary pill badge | 78 |
Secondary contextual alternative. To use, add .badge-secondaryto the badge element
|
| Danger pill badge | 34 |
Danger contextual alternative. To use, add .badge-dangerto the badge element
|
| Success pill badge | 65 |
Success contextual alternative. To use, add .badge-successto the badge element
|
| Warning pill badge | 76 |
Warning contextual alternative. To use, add .badge-warningto the badge element
|
| Info pill badge | 98 |
Info contextual alternative. To use, add .badge-infoto the badge element
|
| Light pill badge | 24 |
Light contextual alternative. To use, add .badge-lightto the badge element
|
| Dark pill badge | 72 |
Dark contextual alternative. To use, add .badge-darkto the badge element
|
| Custom pill badge color | 83 |
Badge with one of availablecustombackground colors. To use, add .bg-*color class
|
| Pill badge options | ||
| Linked badge | 22 |
Linked badge. Use .badgeand other badge classes in <a>element
|
| Badge with dropdown |
Dropdown menu attached to the badgeelement.
|
|
| Flat pill badges | ||
| Primary badge | 59 |
Primary contextual alternative. To use with primary color classes and .badge-flatclass
|
| Secondary badge | 64 |
Secondary contextual alternative. To use with grey color classes and .badge-flatclass
|
| Danger badge | 83 |
Danger contextual alternative. To use with danger color classes and .badge-flatclass
|
| Success badge | 93 |
Success contextual alternative. To use with success color classes and .badge-flatclass
|
| Warning badge | 38 |
Warning contextual alternative. To use with warning color classes and .badge-flatclass
|
| Info badge | 67 |
Info contextual alternative. To use with info color classes and .badge-flatclass
|
| Dark badge | 82 |
Dark contextual alternative. To use with dark grey color classes and .badge-flatclass
|
| Custom badge color | 43 |
To use custom border and text colors, add border-*and text-*color classes to the badge element
|
| Flat pill badge options | ||
| Linked pill badge | 49 |
Linked pill flat badge. Use .badgeand other border/text color classes in an <a>element
|
| Pill badge with dropdown | Dropdown menu attached to the badge with optional caret | |