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

Example heading New

<h1>Example heading <span class="badge badge-primary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-tertiary">New</span></h3>
<h4>Example heading <span class="badge badge-info">New</span></h4>
<h5>Example heading <span class="badge badge-danger">New</span></h5>
<h6>Example heading <span class="badge badge-warning">New</span></h6>

Badges as links

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

Primary Secondary Tertiary Success Danger Warning Info Light Dark

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-tertiary">Tertiary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</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-primary text-uppercase">Badge</span>
<span class="badge badge-md badge-primary text-uppercase">Badge md</span>
<span class="badge badge-lg badge-primary text-uppercase">Badge lg</span>

Notification badges

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

<button type="button" class="btn btn-primary">
    Messages <span class="badge badge-danger">9</span>
</button>