Badges
Documentation and examples for badges, our small count and labeling component.
Examples
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
<span class="badge bg-secondary">New</span>Buttons
Badges can be used as part of links or buttons to provide a counter.
<button type="button" class="btn btn-primary"> Notifications <span class="badge text-bg-light ms-1">4</span></button>Positioned
Use utilities to modify a .badge and position it in the corner of a link or button.
<button type="button" class="btn btn-primary position-relative"> Inbox <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"> 99+ <span class="visually-hidden">unread messages</span> </span></button>Background colors
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Light
- Dark
<span class="badge text-bg-primary">Primary</span>Background soft colors
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Dark
<span class="badge text-bg-primary-soft">Primary</span>Pill badges
Use the .rounded-pill utility class to make badges more rounded with a larger border-radius.
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Light
- Dark
<span class="badge rounded-pill text-bg-primary">Primary</span>
