Components - Labels & Badges
Labels and badges are components that allow 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="label" /> to links, navigation, buttons, Bootstrap navs, and more. Table below contains different options and styling available for badges and labels.
| Basic label styling | ||
|---|---|---|
| Default label | Default | Default label styling. To use, add .label-default to the base .label class |
| Primary label | Primary | Primary contextual alternative. To use, add .label-primary to the base .label class |
| Danger label | Danger | Danger contextual alternative. To use, add .label-danger to the base .label class |
| Success label | Success | Success contextual alternative. To use, add .label-success to the base .label class |
| Warning label | Warning | Warning contextual alternative. To use, add .label-warning to the base .label class |
| Info label | Info | Info contextual alternative. To use, add .label-info to the base .label class |
| Custom label color | Purple | Add one of available custom background colors. To use, add .bg-* color class to the .label element |
| Basic label options | ||
| Rounded label | Rounded label | Label with rounded corners. To use, add .label-rounded class to the .label element |
| Roundless label | Roundless label | This label doesn't have rounded borders. To use, add .label-roundless class to the .label element |
| Block label | Block label | This label fills 100% width of a parent element. To use, add .label-block class to the .label element |
| Linked label | Linked label | You can also use labels as a link in an <a> element |
| Label with dropdown | Dropdown menu attached to the label with optional caret | |
| Icon in label | Label with icon. To use, add icon and .label-icon class to the label. Available in 5 sizes |
|
| Icon in linked label | Linked label with icon. To use, add icon and .label-icon to the link |
|
| Icon in rounded label | Rounded linked icon. Usage is the same, but with additional .label-rounded class |
|
| Icon in linked rounded label | The same as above, but inside link element | |
| Striped labels | ||
| Default label | Default | Basic striped label. To use with default label and .label-striped class |
| Primary label | Primary | Primary contextual alternative. To use with primary label and .label-striped class |
| Danger label | Danger | Danger contextual alternative. To use with danger label and .label-striped class |
| Success label | Success | Success contextual alternative. To use with success label and .label-striped class |
| Warning label | Warning | Warning contextual alternative. To use with warning label and .label-striped class |
| Info label | Info | Info contextual alternative. To use with info label and .label-striped class |
| Custom border color | Violet | Striped label with one of available custom border colors |
| Striped label options | ||
| Right border | Right border | To highlight right border instead of left, add .label-striped-right class |
| Linked label | Linked label | Linked striped label. Use .label-striped and other label classes in <a> element |
| Label with dropdown | Dropdown menu attached to the striped label with optional caret | |
| Icon in striped label | Icon inside striped label. To use custom border color, add .border-* custom border color class. Available in 5 sizes |
|
| Icon in linked striped label | Linked icon inside striped label | |
| Flat labels | ||
| Default flat label | Default | Flat label in default styling. To use with grey color classes and .label-flat class |
| Primary label | Primary | Flat label in primary contextual alternative. To use with primary color classes and .label-flat class |
| Danger label | Danger | Flat label in danger contextual alternative. To use with danger color classes and .label-flat class |
| Success label | Success | Flat label in success contextual alternative. To use with success color classes and .label-flat class |
| Warning label | Warning | Flat label in warning contextual alternative. To use with warning color classes and .label-flat class |
| Info label | Info | Flat label in info contextual alternative. To use with info color classes and .label-flat class |
| Custom label color | Pink | To use custom border and text colors, add border-* and text-* color classes to the .label |
| Flat label options | ||
| Linked flat label | Linked label | Use .label-flat and other label classes in <a> element |
| Rounded flat label | Rounded label | Make flat label rounded with .label-rounded added to the base .label-flat element |
| Block label | Block label | To make flat label full width, use .label-block class. Works with linked labels as well |
| Flat label with dropdown | Dropdown menu attached to the flat label with optional caret | |
| Icon in flat label | Icon inside flat label. To use, add icon and .label-icon class to the label |
|
| Icon in linked flat label | Icon inside linked flat label. To use, add icon and .label-icon to the link |
|
| Icon in flat rounded label | Icon inside rounded flat label. To use, add .label-rounded class |
|
| Icon in linked rounded label | The same as above, but inside link element | |
| Basic badges | ||
| Default badge | 78 | Basic badge. To use, add .badge-default to the badge element |
| Primary badge | 32 | Primary contextual alternative. To use, add .badge-primary to the badge element |
| Danger badge | 34 | Danger contextual alternative. To use, add .badge-danger to the badge element |
| Success badge | 65 | Success contextual alternative. To use, add .badge-success to the badge element |
| Warning badge | 76 | Warning contextual alternative. To use, add .badge-warning to the badge element |
| Info badge | 98 | Info contextual alternative. To use, add .badge-info to the badge element |
| Custom badge color | 83 | Badge with one of available custom background colors. To use, add .bg-* color class |
| Basic badge options | ||
| Linked badge | 22 | Linked badge. Use .badge and other badge classes in <a> element |
| Badge with dropdown | Dropdown menu attached to the badge element. |
|
| Flat badges | ||
| Default badge | 63 | Flat badge in default style. To use with grey color classes and .badge-flat class |
| Primary badge | 59 | Primary contextual alternative. To use with primary color classes and .badge-flat class |
| Danger badge | 83 | Danger contextual alternative. To use with danger color classes and .badge-flat class |
| Success badge | 93 | Success contextual alternative. To use with success color classes and .badge-flat class |
| Warning badge | 38 | Warning contextual alternative. To use with warning color classes and .badge-flat class |
| Info badge | 67 | Info contextual alternative. To use with info color classes and .badge-flat class |
| Custom badge color | 43 | To use custom border and text colors, add border-* and text-* color classes to the badge element |
| Flat badge options | ||
| Linked badge | 49 | Linked flat badge. Use .badge and other border/text color classes in an <a> element |
| Badge with dropdown | Dropdown menu attached to the badge with optional caret | |