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.25 mb-1.25 badge-xs text-primary bg-primary/10">Primary</span>
<span class="badge mr-1.25 mb-1.25 badge-sm text-primary bg-primary/10">Primary</span>
<span class="badge mr-1.25 mb-1.25 text-secondary bg-secondary/10">Secondary</span>
<span class="badge mr-1.25 mb-1.25 badge-lg text-danger bg-danger/10">Danger</span>
<span class="badge mr-1.25 mb-1.25 badge-xl text-warning bg-warning/10">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.25 mb-1.25 text-primary bg-primary/10">Primary</span>
<span class="badge mr-1.25 mb-1.25 text-secondary bg-secondary/10">Secondary</span>
<span class="badge mr-1.25 mb-1.25 text-success bg-success/10">Success</span>
<span class="badge mr-1.25 mb-1.25 text-danger bg-danger/10">Danger</span>
<span class="badge mr-1.25 mb-1.25 text-warning bg-warning/10">Warning</span>
<span class="badge mr-1.25 mb-1.25 text-info bg-info/10">Info</span>
<span class="badge mr-1.25 mb-1.25 bg-light">Light</span>
<span class="badge mr-1.25 mb-1.25 bg-secondary/10">Dark</span>
</div>
<div class="tailwind-badge">
<span class="badge mr-1.25 mb-1.25 text-primary bg-primary/10">1</span>
<span class="badge mr-1.25 mb-1.25 text-secondary bg-secondary/10">2</span>
<span class="badge mr-1.25 mb-1.25 text-success bg-success/10">3</span>
<span class="badge mr-1.25 mb-1.25 text-danger bg-danger/10">4</span>
<span class="badge mr-1.25 mb-1.25 text-warning bg-warning/10">5</span>
<span class="badge mr-1.25 mb-1.25 text-info bg-info/10">6</span>
<span class="badge mr-1.25 mb-1.25 bg-light">7</span>
<span class="badge mr-1.25 mb-1.25 bg-secondary/10">8</span>
</div>
Badges
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<div class="tailwind-badge">
<span class="badge mr-1.25 mb-1.25 bg-primary text-white">Primary</span>
<span class="badge mr-1.25 mb-1.25 bg-[#1F2025] text-white">Secondary</span>
<span class="badge mr-1.25 mb-1.25 bg-success text-white">Success</span>
<span class="badge mr-1.25 mb-1.25 bg-danger text-white">Danger</span>
<span class="badge mr-1.25 mb-1.25 bg-warning text-white">Warning</span>
<span class="badge mr-1.25 mb-1.25 bg-info text-white">Info</span>
<span class="badge mr-1.25 mb-1.25 bg-light">Light</span>
<span class="badge mr-1.25 mb-1.25 bg-secondary/70 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.25 mb-1.25 bg-primary text-white">Pill badge</span>
<span class="badge mr-1.25 mb-1.25 bg-[#1F2025] text-white">Pill badge</span>
<span class="badge mr-1.25 mb-1.25 bg-success text-white">Pill badge</span>
<span class="badge mr-1.25 mb-1.25 bg-danger text-white">Pill badge</span>
<span class="badge mr-1.25 mb-1.25 bg-warning text-white">Pill badge</span>
<span class="badge mr-1.25 mb-1.25 bg-info text-white">Pill badge</span>
<span class="badge mr-1.25 mb-1.25 bg-light">Pill badge</span>
<span class="badge mr-1.25 mb-1.25 bg-secondary/70 text-white">Pill badge</span>
</div>
Link Badge
<div class="tailwind-badge">
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 bg-primary text-white">Links</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 bg-[#1F2025] text-white">Links</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 bg-success text-white">Links</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 bg-danger text-white">Links</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 bg-warning text-white">Links</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 bg-info text-white">Links</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 bg-light">Links</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 bg-secondary/70 text-white">Links</a>
</div>
Rounded Badge
<div class="tailwind-badge">
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! bg-primary text-white">Rounded</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! bg-[#1F2025] text-white">Rounded</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! bg-success text-white">Rounded</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! bg-danger text-white">Rounded</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! bg-warning text-white">Rounded</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! bg-info text-white">Rounded</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! bg-light">Rounded</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! bg-secondary/70 text-white">Rounded</a>
</div>
Rounded Outline Badge
<div class="tailwind-badge">
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! text-primary border-primary!">Rounded</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! text-secondary border-secondary!">Rounded</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! text-success border-success!">Rounded</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! text-danger border-danger!">Rounded</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! text-warning border-warning!">Rounded</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! text-info border-info!">Rounded</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! border-light! dark:text-white">Rounded</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! border-secondary/70! dark:text-white">Rounded</a>
</div>
Outline Circle Badge
<div class="tailwind-badge">
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! text-primary border-primary!">1</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! text-secondary border-secondary!">2</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! text-success border-success!">3</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! text-danger border-danger!">4</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! text-warning border-warning!">5</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! text-info border-info!">6</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! border-light! dark:text-white">7</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! border-secondary/70! dark:text-white">8</a>
</div>
Circle Badge
<div class="tailwind-badge">
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! bg-primary text-white">1</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! bg-[#1F2025] text-white">2</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! bg-success text-white">3</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! bg-danger text-white">4</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! bg-warning text-white">5</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! bg-info text-white">6</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! bg-light">7</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 rounded-full! bg-secondary/70 text-white">8</a>
</div>
Circle Badge Default
<div class="tailwind-badge">
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 text-primary border-primary!">1</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 text-secondary border-secondary!">2</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 text-success border-success!">3</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 text-danger border-danger!">4</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 text-warning border-warning!">5</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 text-info border-info!">6</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 border-light! dark:text-white">7</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 border-secondary/70! dark:text-white">8</a>
</div>
Number Badge
<div class="tailwind-badge">
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 bg-primary text-white">1</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 bg-[#1F2025] text-white">2</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 bg-success text-white">3</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 bg-danger text-white">4</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 bg-warning text-white">5</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 bg-info text-white">6</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 bg-light">7</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 bg-secondary/70 text-white">8</a>
</div>
Badge Sizes
<div class="tailwind-badge">
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 badge-xs bg-primary text-white">xs</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 badge-sm bg-[#1F2025] text-white">sm</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 badge-md bg-success text-white">md</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 badge-lg bg-danger text-white">lg</a>
<a href="javascript:void(0);" class="badge mr-1.25 mb-1.25 badge-xl bg-warning text-white">xl</a>
</div>
Positioned Badges
<div class="tailwind-badge">
<a href="javascript:void(0);" class="badge mb-1.25 bg-primary text-white relative mr-6">Inbox
<span class="absolute top-0 left-full -translate-1/2 text-tiny! px-1.5! leading-none! 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.25 bg-[#1F2025] text-white relative mr-6">Inbox
<span class="absolute top-0 left-full -translate-1/2 text-tiny! px-1.5! leading-none! 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.25 bg-success text-white relative mr-6">Inbox
<span class="absolute top-0 left-full -translate-1/2 text-tiny! px-1.5! leading-none! badge rounded-full! bg-secondary 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.25 bg-warning text-white relative mr-6">1
<span class="absolute top-0 left-full -translate-1/2 p-1.5 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.25 bg-info text-white relative mr-6">2
<span class="absolute top-0 left-full -translate-1/2 p-1.5 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.25 bg-light relative mr-6">3
<span class="absolute top-0 left-full -translate-1/2 p-1.5 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.25 bg-secondary/70 text-white relative mr-6">4
<span class="absolute top-0 left-full -translate-1/2 p-1.5 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-secondary/70 ms-1">1</span>
</button>
<button type="button" class="btn bg-[#1F2025] text-white mb-2 me-2">
Notifications <span class="badge text-white bg-secondary/70 ms-1">2</span>
</button>
<button type="button" class="btn btn-success mb-2 me-2">
Notifications <span class="badge text-white bg-secondary/70 ms-1">3</span>
</button>
<button type="button" class="btn bg-danger text-white mb-2 me-2">
Notifications <span class="badge text-white bg-secondary/70 ms-1">4</span>
</button>
</div>