Purpose Website 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>