Badges
Documentation and examples for badges, our small count and labeling component.
Badges on Bootstrap<span class="badge badge-phoenix badge-phoenix-primary">Primary</span>
<span class="badge badge-phoenix badge-phoenix-secondary">Secondary</span>
<span class="badge badge-phoenix badge-phoenix-success">Success</span>
<span class="badge badge-phoenix badge-phoenix-info">Info</span>
<span class="badge badge-phoenix badge-phoenix-warning">Warning</span>
<span class="badge badge-phoenix badge-phoenix-danger">Danger</span>Primary
Secondary
Success
Info
Warning
Danger
<span class="badge badge-phoenix fs--2 badge-phoenix-primary"><span class="badge-label">Primary</span><span class="ms-1" data-feather="package" style="height:12.8px;width:12.8px;"></span></span>
<span class="badge badge-phoenix fs--2 badge-phoenix-secondary"><span class="badge-label">Secondary</span><span class="ms-1" data-feather="plus" style="height:12.8px;width:12.8px;"></span></span>
<span class="badge badge-phoenix fs--2 badge-phoenix-success"><span class="badge-label">Success</span><span class="ms-1" data-feather="check" style="height:12.8px;width:12.8px;"></span></span>
<span class="badge badge-phoenix fs--2 badge-phoenix-info"><span class="badge-label">Info</span><span class="ms-1" data-feather="info" style="height:12.8px;width:12.8px;"></span></span>
<span class="badge badge-phoenix fs--2 badge-phoenix-warning"><span class="badge-label">Warning</span><span class="ms-1" data-feather="alert-octagon" style="height:12.8px;width:12.8px;"></span></span>
<span class="badge badge-phoenix fs--2 badge-phoenix-danger"><span class="badge-label">Danger</span><span class="ms-1" data-feather="x" style="height:12.8px;width:12.8px;"></span></span>Primary
Secondary
Success
Info
Warning
Danger
Background Color
Use our background utility classes to quickly change the appearance of a badge. Please note that when using Bootstrap’s default .bg-light, you’ll likely need a text color utility like .text-dark for proper styling. This is because background utilities do not set anything but background-color.
<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-info">Info</span>
<span class="badge bg-warning">Warning</span>
<span class="badge bg-danger">Danger</span>Primary
Secondary
Success
Info
Warning
Danger
<button class="btn btn-primary d-flex align-items-center" type="button">Notifications <span class="badge bg-primary-500 ms-2">4</span></button><button class="btn btn-primary position-relative" type="button">
Inbox<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-primary-500">99+<span class="visually-hidden">unread messages</span></span>
</button><h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>