Badge
Small label for counts, status, and metadata.
Basic
Default
Primary
Secondary
Accent
Neutral
<span class="badge">Default</span>
<span class="badge color-primary">Primary</span>
<span class="badge color-secondary">Secondary</span>
<span class="badge color-accent">Accent</span>
<span class="badge color-neutral">Neutral</span> Requires: ux.min.css
<span class="inline-flex items-center justify-center min-w-5 h-5 px-2 text-xs font-semibold rounded-full bg-neutral text-neutral-content">Default</span>
<span class="inline-flex items-center justify-center min-w-5 h-5 px-2 text-xs font-semibold rounded-full bg-primary text-primary-content">Primary</span>
<span class="inline-flex items-center justify-center min-w-5 h-5 px-2 text-xs font-semibold rounded-full bg-secondary text-secondary-content">Secondary</span>
<span class="inline-flex items-center justify-center min-w-5 h-5 px-2 text-xs font-semibold rounded-full bg-accent text-accent-content">Accent</span>
<span class="inline-flex items-center justify-center min-w-5 h-5 px-2 text-xs font-semibold rounded-full bg-neutral text-neutral-content">Neutral</span> Requires: tw.min.css
// No JavaScript required - pure CSS component State Colors
Info
Success
Warning
Error
<span class="badge color-info">Info</span>
<span class="badge color-success">Success</span>
<span class="badge color-warning">Warning</span>
<span class="badge color-error">Error</span> Requires: ux.min.css
<span class="inline-flex items-center justify-center min-w-5 h-5 px-2 text-xs font-semibold rounded-full bg-info text-info-content">Info</span>
<span class="inline-flex items-center justify-center min-w-5 h-5 px-2 text-xs font-semibold rounded-full bg-success text-success-content">Success</span>
<span class="inline-flex items-center justify-center min-w-5 h-5 px-2 text-xs font-semibold rounded-full bg-warning text-warning-content">Warning</span>
<span class="inline-flex items-center justify-center min-w-5 h-5 px-2 text-xs font-semibold rounded-full bg-error text-error-content">Error</span> Requires: tw.min.css
// No JavaScript required - pure CSS component Outline
Default
Primary
Success
Error
<span class="badge badge-outline">Default</span>
<span class="badge badge-outline color-primary">Primary</span>
<span class="badge badge-outline color-success">Success</span>
<span class="badge badge-outline color-error">Error</span> Requires: ux.min.css
<span class="inline-flex items-center justify-center min-w-5 h-5 px-2 text-xs font-semibold rounded-full border border-base-300 bg-transparent text-base-content">Default</span>
<span class="inline-flex items-center justify-center min-w-5 h-5 px-2 text-xs font-semibold rounded-full border border-primary bg-transparent text-primary">Primary</span>
<span class="inline-flex items-center justify-center min-w-5 h-5 px-2 text-xs font-semibold rounded-full border border-success bg-transparent text-success">Success</span>
<span class="inline-flex items-center justify-center min-w-5 h-5 px-2 text-xs font-semibold rounded-full border border-error bg-transparent text-error">Error</span> Requires: tw.min.css
// No JavaScript required - pure CSS component Soft
Default
Primary
Success
Warning
Error
<span class="badge badge-soft">Default</span>
<span class="badge badge-soft color-primary">Primary</span>
<span class="badge badge-soft color-success">Success</span>
<span class="badge badge-soft color-warning">Warning</span>
<span class="badge badge-soft color-error">Error</span> Requires: ux.min.css
<span class="inline-flex items-center justify-center min-w-5 h-5 px-2 text-xs font-semibold rounded-full bg-neutral/15 text-neutral">Default</span>
<span class="inline-flex items-center justify-center min-w-5 h-5 px-2 text-xs font-semibold rounded-full bg-primary/15 text-primary">Primary</span>
<span class="inline-flex items-center justify-center min-w-5 h-5 px-2 text-xs font-semibold rounded-full bg-success/15 text-success">Success</span>
<span class="inline-flex items-center justify-center min-w-5 h-5 px-2 text-xs font-semibold rounded-full bg-warning/15 text-warning">Warning</span>
<span class="inline-flex items-center justify-center min-w-5 h-5 px-2 text-xs font-semibold rounded-full bg-error/15 text-error">Error</span> Requires: tw.min.css
// No JavaScript required - pure CSS component Ghost
Ghost
<span class="badge badge-ghost">Ghost</span> Requires: ux.min.css
<span class="inline-flex items-center justify-center min-w-5 h-5 px-2 text-xs font-semibold rounded-full bg-base-200 text-base-content">Ghost</span> Requires: tw.min.css
// No JavaScript required - pure CSS component Glass
Preview
Glass
Large Glass
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 2rem; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; border-radius: 0.75rem;">
<span class="badge glass">Glass</span>
<span class="badge glass badge-lg">Large Glass</span>
</div> Requires: ux.min.css
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 2rem; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; border-radius: 0.75rem;">
<span class="inline-flex items-center justify-center min-w-5 h-5 px-2 text-xs font-semibold rounded-full text-base-content bg-glass-bg backdrop-blur-glass backdrop-saturate-180 border border-glass-border">Glass</span>
<span class="inline-flex items-center justify-center min-w-6 h-6 px-2.5 text-[0.8125rem] font-semibold rounded-full text-base-content bg-glass-bg backdrop-blur-glass backdrop-saturate-180 border border-glass-border">Large Glass</span>
</div> Requires: tw.min.css
// No JavaScript required - pure CSS component Sizes
XS
SM
Default
LG
XL
<span class="badge badge-xs color-primary">XS</span>
<span class="badge badge-sm color-primary">SM</span>
<span class="badge color-primary">Default</span>
<span class="badge badge-lg color-primary">LG</span>
<span class="badge badge-xl color-primary">XL</span> Requires: ux.min.css
<span class="inline-flex items-center justify-center min-w-3.5 h-3.5 px-1 text-[0.625rem] font-semibold rounded-full bg-primary text-primary-content">XS</span>
<span class="inline-flex items-center justify-center min-w-4 h-4 px-1.5 text-[0.6875rem] font-semibold rounded-full bg-primary text-primary-content">SM</span>
<span class="inline-flex items-center justify-center min-w-5 h-5 px-2 text-xs font-semibold rounded-full bg-primary text-primary-content">Default</span>
<span class="inline-flex items-center justify-center min-w-6 h-6 px-2.5 text-[0.8125rem] font-semibold rounded-full bg-primary text-primary-content">LG</span>
<span class="inline-flex items-center justify-center min-w-7 h-7 px-3 text-sm font-semibold rounded-full bg-primary text-primary-content">XL</span> Requires: tw.min.css
// No JavaScript required - pure CSS component Dot (Status Indicator)
<span class="badge badge-dot color-success"></span>
<span class="badge badge-dot color-warning"></span>
<span class="badge badge-dot color-error"></span>
<span class="badge badge-dot badge-sm color-primary"></span>
<span class="badge badge-dot badge-lg color-info"></span> Requires: ux.min.css
<span class="inline-block size-2 rounded-full bg-success"></span>
<span class="inline-block size-2 rounded-full bg-warning"></span>
<span class="inline-block size-2 rounded-full bg-error"></span>
<span class="inline-block size-1.5 rounded-full bg-primary"></span>
<span class="inline-block size-2.5 rounded-full bg-info"></span> Requires: tw.min.css
// No JavaScript required - pure CSS component Badge on Button
5
99+
<div class="badge-container">
<button class="btn">
Inbox
</button>
<span class="badge badge-sm color-error">5</span>
</div>
<div class="badge-container">
<button class="btn btn-circle color-primary">
<svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" /></svg>
</button>
<span class="badge badge-dot color-error"></span>
</div>
<div class="badge-container">
<button class="btn btn-outline">
Cart
</button>
<span class="badge badge-xs color-primary">99+</span>
</div> Requires: ux.min.css
<div class="relative inline-flex">
<button class="btn">Inbox</button>
<span class="absolute -top-1 -right-1 z-1 inline-flex items-center justify-center min-w-4 h-4 px-1.5 text-[0.6875rem] font-semibold rounded-full bg-error text-error-content">5</span>
</div>
<div class="relative inline-flex">
<button class="btn btn-circle color-primary">
<svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" /></svg>
</button>
<span class="absolute top-0 right-0 z-1 inline-block size-2 rounded-full bg-error"></span>
</div>
<div class="relative inline-flex">
<button class="btn btn-outline">Cart</button>
<span class="absolute -top-1 -right-1 z-1 inline-flex items-center justify-center min-w-3.5 h-3.5 px-1 text-[0.625rem] font-semibold rounded-full bg-primary text-primary-content">99+</span>
</div> Requires: tw.min.css
// No JavaScript required - pure CSS component Badge Positions
A
3
B
7
C
D
!
<div style="display: flex; gap: 2rem; align-items: center;">
<div class="badge-container">
<div style="width: 3rem; height: 3rem; border-radius: 9999px; background: var(--color-base-200); display: flex; align-items: center; justify-content: center;">A</div>
<span class="badge badge-sm color-error">3</span>
</div>
<div class="badge-container badge-container-top-left">
<div style="width: 3rem; height: 3rem; border-radius: 9999px; background: var(--color-base-200); display: flex; align-items: center; justify-content: center;">B</div>
<span class="badge badge-sm color-primary">7</span>
</div>
<div class="badge-container badge-container-bottom-right">
<div style="width: 3rem; height: 3rem; border-radius: 9999px; background: var(--color-base-200); display: flex; align-items: center; justify-content: center;">C</div>
<span class="badge badge-dot color-success"></span>
</div>
<div class="badge-container badge-container-bottom-left">
<div style="width: 3rem; height: 3rem; border-radius: 9999px; background: var(--color-base-200); display: flex; align-items: center; justify-content: center;">D</div>
<span class="badge badge-sm color-warning">!</span>
</div>
</div> Requires: ux.min.css
<div class="flex gap-8 items-center">
<!-- Top-right (default) -->
<div class="relative inline-flex">
<div class="size-12 rounded-full bg-base-200 flex items-center justify-center">A</div>
<span class="absolute -top-1 -right-1 z-1 inline-flex items-center justify-center min-w-4 h-4 px-1.5 text-[0.6875rem] font-semibold rounded-full bg-error text-error-content">3</span>
</div>
<!-- Top-left -->
<div class="relative inline-flex">
<div class="size-12 rounded-full bg-base-200 flex items-center justify-center">B</div>
<span class="absolute -top-1 -left-1 z-1 inline-flex items-center justify-center min-w-4 h-4 px-1.5 text-[0.6875rem] font-semibold rounded-full bg-primary text-primary-content">7</span>
</div>
<!-- Bottom-right -->
<div class="relative inline-flex">
<div class="size-12 rounded-full bg-base-200 flex items-center justify-center">C</div>
<span class="absolute -bottom-1 -right-1 z-1 inline-block size-2 rounded-full bg-success"></span>
</div>
<!-- Bottom-left -->
<div class="relative inline-flex">
<div class="size-12 rounded-full bg-base-200 flex items-center justify-center">D</div>
<span class="absolute -bottom-1 -left-1 z-1 inline-flex items-center justify-center min-w-4 h-4 px-1.5 text-[0.6875rem] font-semibold rounded-full bg-warning text-warning-content">!</span>
</div>
</div> Requires: tw.min.css
// No JavaScript required - pure CSS component Animations
Live
New
3
<span class="badge color-error badge-pulse">Live</span>
<span class="badge color-success badge-bounce">New</span>
<div class="badge-container" style="margin-left: 1rem;">
<button class="btn btn-ghost">Notifications</button>
<span class="badge badge-sm color-error badge-pulse">3</span>
</div> Requires: ux.min.css
<!-- Animations require semantic classes (.badge-pulse, .badge-bounce) -->
<!-- or define custom @keyframes in your CSS -->
<span class="badge color-error badge-pulse">Live</span>
<span class="badge color-success badge-bounce">New</span>
<div class="badge-container" style="margin-left: 1rem;">
<button class="btn btn-ghost">Notifications</button>
<span class="badge badge-sm color-error badge-pulse">3</span>
</div> Requires: tw.min.css
// No JavaScript required - pure CSS component
// Animations are CSS-only via @keyframes In Text
Messages 12 Status Active Version v3.0
<p style="font-size: 0.875rem; color: var(--color-base-content);">
Messages <span class="badge badge-sm color-primary">12</span>
Status <span class="badge badge-sm badge-soft color-success">Active</span>
Version <span class="badge badge-sm badge-outline">v3.0</span>
</p> Requires: ux.min.css
<p class="text-sm text-base-content">
Messages <span class="inline-flex items-center justify-center min-w-4 h-4 px-1.5 text-[0.6875rem] font-semibold rounded-full bg-primary text-primary-content">12</span>
Status <span class="inline-flex items-center justify-center min-w-4 h-4 px-1.5 text-[0.6875rem] font-semibold rounded-full bg-success/15 text-success">Active</span>
Version <span class="inline-flex items-center justify-center min-w-4 h-4 px-1.5 text-[0.6875rem] font-semibold rounded-full border border-base-300 bg-transparent text-base-content">v3.0</span>
</p> Requires: tw.min.css
// No JavaScript required - pure CSS component Classes Reference
| Class | Description |
|---|---|
| .badge | Base badge |
| .badge-outline | Transparent background, colored border |
| .badge-soft | Tinted background |
| .badge-ghost | Neutral background |
| .glass | Glass morphism effect |
| .badge-xs | Extra small (14px) |
| .badge-sm | Small (16px) |
| .badge-lg | Large (24px) |
| .badge-xl | Extra large (28px) |
| .badge-dot | Dot indicator (no text) |
| .badge-container | Positions badge on a parent element |
| .badge-container-top-left | Badge at top-left corner |
| .badge-container-bottom-right | Badge at bottom-right corner |
| .badge-container-bottom-left | Badge at bottom-left corner |
| .badge-pulse | Pulsing animation |
| .badge-bounce | Bounce entrance animation |