Badge
Badge.
Make use of Tailwind's unique Badge styles to enhance actions in forms, dialogs, and various other elements, featuring comprehensive support for multiple sizes, states, and additional functionalities.
BadgeBadge
Badges Size
Primary
Primary
Secondary
Danger
Warning
<div class="tailwind-badge">
<span class="badge mr-1.1 mb-1.1 badge-xs text-primary bg-primarylight">Primary</span>
<span class="badge mr-1.1 mb-1.1 badge-sm text-primary bg-primarylight">Primary</span>
<span class="badge mr-1.1 mb-1.1 text-secondary bg-secondarylight">Secondary</span>
<span class="badge mr-1.1 mb-1.1 badge-lg text-danger bg-dangerlight">Danger</span>
<span class="badge mr-1.1 mb-1.1 badge-xl text-warning bg-warninglight">Warning</span>
</div>
Badges Light
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
1
2
3
4
5
6
7
8
<div class="tailwind-badge">
<span class="badge mr-1.1 mb-1.1 text-primary bg-primarylight">Primary</span>
<span class="badge mr-1.1 mb-1.1 text-secondary bg-secondarylight">Secondary</span>
<span class="badge mr-1.1 mb-1.1 text-success bg-successlight">Success</span>
<span class="badge mr-1.1 mb-1.1 text-danger bg-dangerlight">Danger</span>
<span class="badge mr-1.1 mb-1.1 text-warning bg-warninglight">Warning</span>
<span class="badge mr-1.1 mb-1.1 text-info bg-infolight">Info</span>
<span class="badge mr-1.1 mb-1.1 text-dark bg-[#fdfdfe]">Light</span>
<span class="badge mr-1.1 mb-1.1 text-dark bg-darklight">Dark</span>
</div>
<div class="tailwind-badge">
<span class="badge mr-1.1 mb-1.1 text-primary bg-primarylight">1</span>
<span class="badge mr-1.1 mb-1.1 text-secondary bg-secondarylight">2</span>
<span class="badge mr-1.1 mb-1.1 text-success bg-successlight">3</span>
<span class="badge mr-1.1 mb-1.1 text-danger bg-dangerlight">4</span>
<span class="badge mr-1.1 mb-1.1 text-warning bg-warninglight">5</span>
<span class="badge mr-1.1 mb-1.1 text-info bg-infolight">6</span>
<span class="badge mr-1.1 mb-1.1 text-dark bg-[#fdfdfe]">7</span>
<span class="badge mr-1.1 mb-1.1 text-dark bg-darklight">8</span>
</div>
Badges
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<div class="tailwind-badge">
<span class="badge mr-1.1 mb-1.1 bg-primary text-white">Primary</span>
<span class="badge mr-1.1 mb-1.1 bg-[#1F2025] text-white">Secondary</span>
<span class="badge mr-1.1 mb-1.1 bg-success text-white">Success</span>
<span class="badge mr-1.1 mb-1.1 bg-danger text-white">Danger</span>
<span class="badge mr-1.1 mb-1.1 bg-warning text-white">Warning</span>
<span class="badge mr-1.1 mb-1.1 bg-info text-white">Info</span>
<span class="badge mr-1.1 mb-1.1 bg-light text-dark">Light</span>
<span class="badge mr-1.1 mb-1.1 bg-dark text-white">Dark</span>
</div>
Pill Badge
Pill badge
Pill badge
Pill badge
Pill badge
Pill badge
Pill badge
Pill badge
Pill badge
<div class="tailwind-badge">
<span class="badge mr-1.1 mb-1.1 bg-primary text-white">Pill badge</span>
<span class="badge mr-1.1 mb-1.1 bg-[#1F2025] text-white">Pill badge</span>
<span class="badge mr-1.1 mb-1.1 bg-success text-white">Pill badge</span>
<span class="badge mr-1.1 mb-1.1 bg-danger text-white">Pill badge</span>
<span class="badge mr-1.1 mb-1.1 bg-warning text-white">Pill badge</span>
<span class="badge mr-1.1 mb-1.1 bg-info text-white">Pill badge</span>
<span class="badge mr-1.1 mb-1.1 bg-light text-dark">Pill badge</span>
<span class="badge mr-1.1 mb-1.1 bg-dark text-white">Pill badge</span>
</div>
Link Badge
<div class="tailwind-badge">
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 bg-primary text-white">Links</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 bg-[#1F2025] text-white">Links</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 bg-success text-white">Links</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 bg-danger text-white">Links</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 bg-warning text-white">Links</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 bg-info text-white">Links</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 bg-light text-dark">Links</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 bg-dark text-white">Links</a>
</div>
Rounded Badge
<div class="tailwind-badge">
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full bg-primary text-white">Rounded</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full bg-[#1F2025] text-white">Rounded</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full bg-success text-white">Rounded</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full bg-danger text-white">Rounded</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full bg-warning text-white">Rounded</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full bg-info text-white">Rounded</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full bg-light text-dark">Rounded</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full bg-dark text-white">Rounded</a>
</div>
Rounded Outline Badge
<div class="tailwind-badge">
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full text-primary !border-primary">Rounded</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full text-secondary !border-secondary">Rounded</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full text-success !border-success">Rounded</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full text-danger !border-danger">Rounded</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full text-warning !border-warning">Rounded</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full text-info !border-info">Rounded</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full text-dark !border-light dark:text-white">Rounded</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full text-dark !border-dark dark:text-white">Rounded</a>
</div>
Outline Circle Badge
<div class="tailwind-badge">
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full text-primary !border-primary">1</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full text-secondary !border-secondary">2</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full text-success !border-success">3</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full text-danger !border-danger">4</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full text-warning !border-warning">5</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full text-info !border-info">6</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full text-dark !border-light dark:text-white">7</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full text-dark !border-dark dark:text-white">8</a>
</div>
Circle Badge
<div class="tailwind-badge">
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full bg-primary text-white">1</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full bg-[#1F2025] text-white">2</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full bg-success text-white">3</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full bg-danger text-white">4</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full bg-warning text-white">5</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full bg-info text-white">6</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full bg-light text-dark">7</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 !rounded-full bg-dark text-white">8</a>
</div>
Circle Badge Default
<div class="tailwind-badge">
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 text-primary !border-primary">1</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 text-secondary !border-secondary">2</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 text-success !border-success">3</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 text-danger !border-danger">4</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 text-warning !border-warning">5</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 text-info !border-info">6</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 text-dark !border-light dark:text-white">7</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 text-dark !border-dark dark:text-white">8</a>
</div>
Number Badge
<div class="tailwind-badge">
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 bg-primary text-white">1</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 bg-[#1F2025] text-white">2</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 bg-success text-white">3</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 bg-danger text-white">4</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 bg-warning text-white">5</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 bg-info text-white">6</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 bg-light text-dark">7</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 bg-dark text-white">8</a>
</div>
Badge Sizes
<div class="tailwind-badge">
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 badge-xs bg-primary text-white">xs</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 badge-sm bg-[#1F2025] text-white">sm</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 badge-md bg-success text-white">md</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 badge-lg bg-danger text-white">lg</a>
<a href="javascript:void(0);" class="badge mr-1.1 mb-1.1 badge-xl bg-warning text-white">xl</a>
</div>
Positioned Badges
<div class="tailwind-badge">
<a href="javascript:void(0);" class="badge mb-1.1 bg-primary text-white relative mr-6">Inbox
<span class="absolute top-0 left-full [transform:translate(-50%,_-50%)] badge !rounded-full bg-danger text-white">
99+
<span class="absolute [clip:rect(0,_0,_0,_0)]">unread messages</span>
</span>
</a>
<a href="javascript:void(0);" class="badge mb-1.1 bg-[#1F2025] text-white relative mr-6">Inbox
<span class="absolute top-0 left-full [transform:translate(-50%,_-50%)] badge !rounded-full bg-warning text-white">
99+
<span class="absolute [clip:rect(0,_0,_0,_0)]">unread messages</span>
</span>
</a>
<a href="javascript:void(0);" class="badge mb-1.1 bg-success text-white relative mr-6">Inbox
<span class="absolute top-0 left-full [transform:translate(-50%,_-50%)] badge !rounded-full bg-dark text-white">
99+
<span class="absolute [clip:rect(0,_0,_0,_0)]">unread messages</span>
</span>
</a>
<a href="javascript:void(0);" class="badge mb-1.1 bg-warning text-white relative mr-6">1
<span class="absolute top-0 left-full [transform:translate(-50%,_-50%)] p-2 bg-danger border !border-light rounded-full">
<span class="absolute [clip:rect(0,_0,_0,_0)]">New alerts</span>
</span>
</a>
<a href="javascript:void(0);" class="badge mb-1.1 bg-info text-white relative mr-6">2
<span class="absolute top-0 left-full [transform:translate(-50%,_-50%)] p-2 bg-danger border !border-light rounded-full">
<span class="absolute [clip:rect(0,_0,_0,_0)]">New alerts</span>
</span>
</a>
<a href="javascript:void(0);" class="badge mb-1.1 bg-light text-dark relative mr-6">3
<span class="absolute top-0 left-full [transform:translate(-50%,_-50%)] p-2 bg-danger border !border-light rounded-full">
<span class="absolute [clip:rect(0,_0,_0,_0)]">New alerts</span>
</span>
</a>
<a href="javascript:void(0);" class="badge mb-1.1 bg-dark text-white relative mr-6">4
<span class="absolute top-0 left-full [transform:translate(-50%,_-50%)] p-2 bg-danger border !border-light rounded-full">
<span class="absolute [clip:rect(0,_0,_0,_0)]">New alerts</span>
</span>
</a>
</div>
Badge With Button
<div class="tailwind-badge">
<button type="button" class="btn bg-primary text-white mb-2 me-2">
Notifications <span class="badge text-white bg-dark">1</span>
</button>
<button type="button" class="btn bg-[#1F2025] text-white mb-2 me-2">
Notifications <span class="badge text-white bg-dark">2</span>
</button>
<button type="button" class="btn bg-success text-white mb-2 me-2">
Notifications <span class="badge text-white bg-dark">3</span>
</button>
<button type="button" class="btn bg-danger text-white mb-2 me-2">
Notifications <span class="badge text-white bg-dark">4</span>
</button>
</div>