Badges

Use badges to add extra labeling to alongside titles or to categorize items

Badge

The following are the default badge styles from Pixel. Use the color variables to add preferred colors (ie. badge-primary, badge-secondary):

Dark Secondary Success Danger Info 
<span class="badge badge-dark text-uppercase">Dark</span>
<span class="badge badge-secondary text-uppercase">Secondary</span>
<span class="badge badge-success text-uppercase">Success</span>
<span class="badge badge-danger text-uppercase">Danger</span>
<span class="badge badge-info text-uppercase">Info</span>

You can also use badges as links. For example you can use them to showcase categories:

Dark Secondary Success Danger Info 
<a href="#" class="badge badge-dark">Dark</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-info">Info</a>

Sizing with badges

Fancy larger or smaller badges? Add .badge-md or .badge-lg for additional sizes.

Badge Badge md Badge lg 
<span class="badge badge-success text-uppercase">Badge</span>
<span class="badge badge-md badge-success text-uppercase">Badge md</span>
<span class="badge badge-lg badge-success text-uppercase">Badge lg</span>

Notification badges Pro

You can also use the badges as a counter indicator in buttons or alongside text:

<button type="button" class="btn btn-primary">
    Notifications <span class="badge badge-pill badge-success">5</span>
    <span class="sr-only">unread messages</span>
</button>