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

<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

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

<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

<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>
  &nbsp;&nbsp;
  Status <span class="badge badge-sm badge-soft color-success">Active</span>
  &nbsp;&nbsp;
  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>
  &nbsp;&nbsp;
  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>
  &nbsp;&nbsp;
  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