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 Success Danger Warning Info Light Dark

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>

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 text-dark">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-secondary">9</span>
  <span class="sr-only">unread messages</span>
</button>