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):

Primary Secondary Tertiary Gray Success Danger Warning Info

<a href="#" class="badge bg-primary">Primary</a>
<a href="#" class="badge bg-secondary">Secondary</a>
<a href="#" class="badge bg-tertiary">Tertiary</a>
<a href="#" class="badge bg-gray">Gray</a>
<a href="#" class="badge bg-success">Success</a>
<a href="#" class="badge bg-danger">Danger</a>
<a href="#" class="badge bg-warning text-dark">Warning</a>
<a href="#" class="badge bg-info">Info</a>

Sizing with badges

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

Primary Secondary Success

<span class="badge bg-primary">Primary</span>
<span class="badge badge-md bg-secondary">Secondary</span>
<span class="badge badge-lg bg-success">Success</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">
  Profile <span class="badge bg-tertiary">9</span>
  <span class="sr-only">unread messages</span>
</button>