# Badge

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

Bootstrap Documentation

## Examples

### Text

Show code
Primary Secondary Success Danger Warning Info Dark

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

    <span class="badge badge-secondary">
        Secondary
    </span>

    <span class="badge badge-success">
        Success
    </span>

    <span class="badge badge-danger">
        Danger
    </span>

    <span class="badge badge-warning">
        Warning
    </span>

    <span class="badge badge-info">
        Info
    </span>

    <span class="badge badge-dark">
        Dark
    </span>

### Links

Using the contextual `.badge-*` classes on an `<a>` element quickly provide actionable badges with hover and focus states.

Show code
Primary Secondary Success Danger Warning Info Dark

    <a href="#" class="badge badge-primary">
        Primary
    </a>

    <a href="#" class="badge badge-secondary">
        Secondary
    </a>

    <a href="#" class="badge badge-success">
        Success
    </a>

    <a href="#" class="badge badge-danger">
        Danger
    </a>

    <a href="#" class="badge badge-warning">
        Warning
    </a>

    <a href="#" class="badge badge-info">
        Info
    </a>

    <a href="#" class="badge badge-dark">
        Dark
    </a>

### Icon

Show code
Primary Secondary Success Danger Warning Info Dark

    <span class="badge badge-primary">
        <i data-feather="check"></i>Primary
    </span>

    <span class="badge badge-secondary">
        <i data-feather="check"></i>Secondary
    </span>

    <span class="badge badge-success">
        <i data-feather="check"></i>Success
    </span>

    <span class="badge badge-danger">
        <i data-feather="check"></i>Danger
    </span>

    <span class="badge badge-warning">
        <i data-feather="check"></i>Warning
    </span>

    <span class="badge badge-info">
        <i data-feather="check"></i>Info
    </span>

    <span class="badge badge-dark">
        <i data-feather="check"></i>Dark
    </span>

## Colors

### Soft

Show code
Soft primary Soft secondary Soft success Soft danger Soft warning Soft info Soft dark

    <span class="badge badge-soft-primary">
        Soft primary
    </span>

    <span class="badge badge-soft-secondary">
        Soft secondary
    </span>

    <span class="badge badge-soft-success">
        Soft success
    </span>

    <span class="badge badge-soft-danger">
        Soft danger
    </span>

    <span class="badge badge-soft-warning">
        Soft warning
    </span>

    <span class="badge badge-soft-info">
        Soft info
    </span>

    <span class="badge badge-soft-dark">
        Soft dark
    </span>

## Shapes

### Pills

Show code
Warning

    <span class="badge badge-warning badge-pill">
        Warning
    </span>

### Circle

Show code
3 3 3 3 3 3 3

    <span class="badge badge-primary badge-circle">
        3
    </span>

    <span class="badge badge-secondary badge-circle">
        3
    </span>

    <span class="badge badge-success badge-circle">
        3
    </span>

    <span class="badge badge-danger badge-circle">
        3
    </span>

    <span class="badge badge-warning badge-circle">
        3
    </span>

    <span class="badge badge-info badge-circle">
        3
    </span>

    <span class="badge badge-dark badge-circle">
        3
    </span>

### Sizing

Show code
Warning Warning Warning

    <span class="badge badge-warning">
        Warning
    </span>

    <span class="badge badge-warning badge-md">
        Warning
    </span>

    <span class="badge badge-warning badge-lg">
        Warning
    </span>