# Boomerang UI Kit

## Badges

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

Open Bootstrap Docs

### Examples

Primary Secondary Tertiary Success Danger Warning Info

    <span class="badge badge-lg badge-pill badge-primary text-uppercase">Primary</span>
    <span class="badge badge-lg badge-pill badge-secondary text-uppercase">Secondary</span>
    <span class="badge badge-lg badge-pill badge-tertiary text-uppercase">Tertiary</span>
    <span class="badge badge-lg badge-pill badge-success text-uppercase">Success</span>
    <span class="badge badge-lg badge-pill badge-danger text-uppercase">Danger</span>
    <span class="badge badge-lg badge-pill badge-warning text-uppercase">Warning</span>
    <span class="badge badge-lg badge-pill badge-info text-uppercase">Info</span>

###### Additional Class Reference

`.badge-md`
  Apply to `.badge` to increase its size to medium

`.badge-lg`
  Apply to `.badge` to increase its size to large

### Dot badges

paid pending finished

    <span class="badge badge-dot mr-4">
        <i class="bg-green"></i> paid
    </span>
    <span class="badge badge-dot mr-4">
        <i class="bg-warning"></i> pending
    </span>
    <span class="badge badge-dot mr-4">
        <i class="bg-blue"></i> finished
    </span>

### Badge counter

    <button type="button" class="btn btn-primary">
        Notifications <span class="badge badge-light ml-2">4</span>
    </button>