Badge
Documentation and examples for badges, our small count and labeling component.
Examples
Badges scale to match the size of the immediate parent element by using relative font sizing and em units.
Example heading New
Example heading New
Example heading New
Colors
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Soft badges
Primary
Success
Danger
Warning
Info
Outline badges
Primary
Success
Danger
Pill badges
Primary
Success
Warning
Positioned badge
Use .badge-positioned to place a badge relative to its positioned parent (e.g. icon buttons):
3
<button class="btn btn-icon btn-outline-primary position-relative">
<svg ...></svg>
<span class="badge badge-pill bg-danger badge-positioned">3</span>
</button>Count and dot badges
Use .badge-circle and .badge-dot for compact count or presence indicators.