#### Components - Badges

Statistics Invoices Schedule

##### 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-primary` to the base `.badge` class
Secondary badge | Secondary | Primary contextual alternative. To use, add `.badge-secondary` to the base `.badge` class
Danger badge | Danger | Danger contextual alternative. To use, add `.badge-danger` to the base `.badge` class
Success badge | Success | Success contextual alternative. To use, add `.badge-success` to the base `.badge` class
Warning badge | Warning | Warning contextual alternative. To use, add `.badge-warning` to the base `.badge` class
Info badge | Info | Info contextual alternative. To use, add `.badge-info` to the base `.badge` class
Light badge | Light | Light contextual alternative. To use, add `.badge-light` to the base `.badge` class
Dark badge | Dark | Dark contextual alternative. To use, add `.badge-dark` to the base `.badge` class
Transparent badge | Transparent | Transparent contextual alternative. To use, remove background color class from the `.badge` container
Custom badge color | Purple | Add one of available custom background colors. To use, add `.bg-*` color class to the `.badge` element
Basic badge options
Roundless badge | Roundless badge | This badge doesn't have rounded borders. To use, add `.badge-roundless` class to the `.badge` element
Block badge | Block badge | This badge fills 100% width of a parent element. To use, add `.d-block` class to the `.badge` element
Linked badge | Linked badge | You can also use badges as a link in an `<a>` element
Label with dropdown | Dropdown | Dropdown menu attached to the badge with optional caret
Icon in badge |  | Label with icon. To use, add icon and `.badge-icon` class to the badge
Icon in linked badge |  | Linked badge with icon. To use, add icon and `.badge-icon` to the link
Icon in rounded badge |  | Rounded linked icon. Usage is the same, but with additional `.rounded-circle` class
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-striped` class
Primary badge | Primary | Primary contextual alternative. To use with primary badge and `.badge-striped` class
Danger badge | Danger | Danger contextual alternative. To use with danger badge and `.badge-striped` class
Success badge | Success | Success contextual alternative. To use with success badge and `.badge-striped` class
Warning badge | Warning | Warning contextual alternative. To use with warning badge and `.badge-striped` class
Info badge | Info | Info contextual alternative. To use with info badge and `.badge-striped` class
Custom border color | Violet | Striped badge with one of available custom border colors
Striped badge options
Right border | Right border | To highlight right border instead of left, add `.badge-striped-right` class
Linked badge | Linked badge | Linked striped badge. Use `.badge-striped` and other badge classes in `<a>` element
Label with dropdown | 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-flat` class
Secondary badge | Secondary | Flat badge in secondary contextual alternative. To use with grey color classes and `.badge-flat` class
Danger badge | Danger | Flat badge in danger contextual alternative. To use with danger color classes and `.badge-flat` class
Success badge | Success | Flat badge in success contextual alternative. To use with success color classes and `.badge-flat` class
Warning badge | Warning | Flat badge in warning contextual alternative. To use with warning color classes and `.badge-flat` class
Info badge | Info | Flat badge in info contextual alternative. To use with info color classes and `.badge-flat` class
Dark badge | Dark | Flat badge in dark contextual alternative. To use with dark grey color classes and `.badge-flat` class
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-roundless` class to the `.badge` element
Linked flat badge | Linked badge | Use `.badge-flat` and other badge classes in `<a>` element
Block badge | Block badge | To make flat badge full width, use `.d-block` class. Works with linked badges as well
Flat badge with dropdown | 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-icon` class to the badge
Icon in linked flat badge |  | Icon inside linked flat badge. To use, add icon and `.badge-icon` to the link
Icon in flat rounded badge |  | Icon inside rounded flat badge. To use, add `.rounded-circle` class
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-primary` to the badge element
Secondary pill badge | 78 | Secondary contextual alternative. To use, add `.badge-secondary` to the badge element
Danger pill badge | 34 | Danger contextual alternative. To use, add `.badge-danger` to the badge element
Success pill badge | 65 | Success contextual alternative. To use, add `.badge-success` to the badge element
Warning pill badge | 76 | Warning contextual alternative. To use, add `.badge-warning` to the badge element
Info pill badge | 98 | Info contextual alternative. To use, add `.badge-info` to the badge element
Light pill badge | 24 | Light contextual alternative. To use, add `.badge-light` to the badge element
Dark pill badge | 72 | Dark contextual alternative. To use, add `.badge-dark` to the badge element
Custom pill badge color | 83 | Badge with one of available `custom` background colors. To use, add `.bg-*` color class
Pill 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 pill badges
Primary badge | 59 | Primary contextual alternative. To use with primary color classes and `.badge-flat` class
Secondary badge | 64 | Secondary contextual alternative. To use with grey 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
Dark badge | 82 | Dark contextual alternative. To use with dark grey 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 pill badge options
Linked pill badge | 49 | Linked pill flat badge. Use `.badge` and other border/text color classes in an `<a>` element
Pill badge with dropdown | 94 | Dropdown menu attached to the badge with optional caret