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>