Do you know the latest update of 2019? A overview of our is now available on YouTube

Components

## Badges

Documentation and examples for badges, our small count and labeling component.

##### Example with Variations

Add any of the below mentioned modifier classes to change the appearance of a badge.

Default Style

- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Dark
- Gray
- Light

Pill Style

- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Dark
- Gray
- Light

Outline Style

- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Dark
- Gray
- Light

Outline Pill Style

- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Dark
- Gray
- Light

Class Reference | Details
--- | ---
`.badge-{state}` | Use `{state}` as `primary, secondary, success, info, warning, danger, dark, gray, light`
`.badge-outline-{state}` | Same as above `{state}`
`.badge-pill` | Use with `.badge` class rounded badge style.

###### Code Example

    <span class="badge badge-primary">...</span>
    <span class="badge badge-outline-primary">...</span>

###### Code Example

    <span class="badge badge-pill badge-primary">...</span>
    <span class="badge badge-pill badge-outline-primary">...</span>

##### Dot Style

Use the `.badge-dot` modifier class to make dot style badges.

- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Dark
- Gray
- Light

###### Code Example

    <span class="badge badge-dot badge-primary">Primary</span>

##### Dim/Pale Style

Use the `.badge-dim` modifier class to make soft light / pale color badges.

Pale Style

- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Dark
- Gray
- Light

Pale Pill Style

- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Dark
- Gray
- Light

Pale Bordered Style

- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Dark
- Gray
- Light

Pale Bordered Pill Style

- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Dark
- Gray
- Light

###### Code Example

    <span class="badge badge-dim badge-primary">Primary</span>
    <span class="badge badge-dim badge-pill badge-primary">Primary</span>

###### Code Example

    <span class="badge badge-dim badge-outline-primary">Primary</span>
    <span class="badge badge-dim badge-pill badge-outline-primary">Primary</span>

##### Badge Size

Use the `.badge-{size}` modifier class to control badge sizes.

Default Style

- Primary
- Primary
- Primary
- Primary
- Primary

Pill Style

- Primary
- Primary
- Primary
- Primary
- Primary

Class Reference | Details
--- | ---
`.badge-{size}` | Use `{size}` as `sm, md, lg, xl`

###### Code Example

    <span class="badge badge-md badge-primary">Primary</span>

###### Code Example

    <span class="badge badge-pill badge-md badge-primary">Primary</span>