Badges
Documentation and examples for badges, our small count and labeling component.
Badges on HummingbirdPhoenix Badges
<span class="badge badge-phoenix-primary">Primary</span>
<span class="badge badge-phoenix-secondary">Secondary</span>
<span class="badge badge-phoenix-success">Success</span>
<span class="badge badge-phoenix-info">Info</span>
<span class="badge badge-phoenix-warning">Warning</span>
<span class="badge badge-phoenix-danger">Danger</span>Primary
Secondary
Success
Info
Warning
Danger
Phoenix Badge with icons
<span class="badge-phoenix-primary badge text-sm"><span class="badge-label">Primary</span><span class="ms-1 size-[12.8px]" data-feather="package"></span></span>
<span class="badge-phoenix-secondary badge text-sm"><span class="badge-label">Secondary</span><span class="ms-1 size-[12.8px]" data-feather="plus"></span></span>
<span class="badge-phoenix-success badge text-sm"><span class="badge-label">Success</span><span class="ms-1 size-[12.8px]" data-feather="check"></span></span>
<span class="badge-phoenix-info badge text-sm"><span class="badge-label">Info</span><span class="ms-1 size-[12.8px]" data-feather="info"></span></span>
<span class="badge-phoenix-warning badge text-sm"><span class="badge-label">Warning</span><span class="ms-1 size-[12.8px]" data-feather="alert-octagon"></span></span>
<span class="badge-phoenix-danger badge text-sm"><span class="badge-label">Danger</span><span class="ms-1 size-[12.8px]" data-feather="x"></span></span>Primary
Secondary
Success
Info
Warning
Danger
Background Color
Use our background utility classes to quickly change the appearance of a badge.
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>Primary
Secondary
Success
Info
Warning
Danger
Buttons
Badges scale to match the size of the immediate parent element by using relative font sizing and em units. As of v5, badges no longer have focus or hover styles for links.
<button class="btn btn-primary flex items-center" type="button">Notifications <span class="badge badge-primary bg-primary-dark ms-2">4</span></button>Positioned
Use utilities to modify a .badge and position it in the corner of a link or button.
<button class="btn btn-primary relative" type="button">
Inbox<span class="absolute start-full top-0 -translate-1/2 badge rounded-full bg-primary-dark">99+<span class="sr-only">unread messages</span></span>
</button>Examples
Badges scale to match the size of the immediate parent element by using relative font sizing and em units. As of v5, badges no longer have focus or hover styles for links.
<h1>Example heading <span class="badge text-white bg-secondary">New</span></h1>
<h2>Example heading <span class="badge text-white bg-secondary">New</span></h2>
<h3>Example heading <span class="badge text-white bg-secondary">New</span></h3>
<h4>Example heading <span class="badge text-white bg-secondary">New</span></h4>
<h5>Example heading <span class="badge text-white bg-secondary">New</span></h5>
<h6>Example heading <span class="badge text-white bg-secondary">New</span></h6>
