#### Components - Labels & Badges

Statistics Invoices Schedule

##### Labels and 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 | 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 | 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 | 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 | 57 | 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 | 94 | Dropdown menu attached to the badge with optional caret