Badge
A Tailwind CSS badge component for displaying status, labels, or counts.
Badge
<span class="badge">Badge</span>Variants
Use different variants to communicate different types of information.
Default
Secondary
Destructive
Outline
<span class="badge">Default</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-destructive">Destructive</span>
<span class="badge badge-outline">Outline</span>With icons
Badges can include icons for additional context.
Verified
Pending
Failed
Featured
<span class="badge"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg> Verified</span>
<span class="badge badge-secondary"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></svg> Pending</span>
<span class="badge badge-destructive"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg> Failed</span>
<span class="badge badge-outline"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg> Featured</span>As notification count
Use badges to display notification counts or status indicators.
<button class="btn btn-outline btn-icon relative" aria-label="Notifications">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.268 21a2 2 0 0 0 3.464 0"></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg>
<span class="badge badge-destructive absolute -top-1 -right-1 size-5 p-0"
>3</span
>
</button>
<button class="btn btn-outline btn-icon relative" aria-label="Messages">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg>
<span class="badge absolute -top-1 -right-1 size-5 p-0">12</span>
</button>Customization
Combine badge classes with Tailwind utilities for custom styling.
Info
Success
Warning
Error
<span class="badge bg-blue-500/10 text-blue-500 border-transparent">Info</span>
<span class="badge bg-green-500/10 text-green-500 border-transparent"
>Success</span
>
<span class="badge bg-yellow-500/10 text-yellow-500 border-transparent"
>Warning</span
>
<span class="badge bg-red-500/10 text-red-500 border-transparent">Error</span>You can also use solid colors for higher contrast.
Info
Success
Warning
Error
<span class="badge bg-blue-500 text-white border-transparent">Info</span>
<span class="badge bg-green-500 text-white border-transparent">Success</span>
<span class="badge bg-yellow-500 text-black border-transparent">Warning</span>
<span class="badge bg-red-500 text-white border-transparent">Error</span>How it works
The badge component is a CSS-only component for displaying short labels, statuses, or counts. It includes variant classes for different visual styles.
Structure
A badge is typically a <span> element with the .badge class:
<span class="badge">Label</span>Badges can also be used as links:
<a href="#" class="badge">Clickable</a>Class reference
All available classes for the badge component.
| Class | Description |
|---|---|
badge | Add to <span> or <a> element to apply base badge styles |
badge-default | Add to .badge for primary filled style (default) |
badge-secondary | Add to .badge for secondary muted style |
badge-destructive | Add to .badge for red destructive/danger style |
badge-outline | Add to .badge for outlined style with transparent background |
<span class="badge">Default</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-destructive">Destructive</span>
<span class="badge badge-outline">Outline</span>