# 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

Default Large

    <span class="badge bg-primary">Default</span>
    <span class="badge badge-lg bg-success">Large</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="visually-hidden">unread messages</span>
    </button>