Status Badge

Colored badge with dot indicator for showing state: active, offline, pending, error, and more. Supports pulse animation, sizes, and solid/outlined variants.

Color Variants

Preview

Active Pending Error Info Offline Away Busy Draft Archived Beta

<div class="flex flex-wrap gap-2">
  <span class="status-badge status-badge-success"><span class="status-badge-dot"></span> Active</span>
  <span class="status-badge status-badge-warning"><span class="status-badge-dot"></span> Pending</span>
  <span class="status-badge status-badge-error"><span class="status-badge-dot"></span> Error</span>
  <span class="status-badge status-badge-info"><span class="status-badge-dot"></span> Info</span>
  <span class="status-badge status-badge-offline"><span class="status-badge-dot"></span> Offline</span>
  <span class="status-badge status-badge-away"><span class="status-badge-dot"></span> Away</span>
  <span class="status-badge status-badge-busy"><span class="status-badge-dot"></span> Busy</span>
  <span class="status-badge status-badge-draft"><span class="status-badge-dot"></span> Draft</span>
  <span class="status-badge status-badge-archived"><span class="status-badge-dot"></span> Archived</span>
  <span class="status-badge status-badge-beta"><span class="status-badge-dot"></span> Beta</span>
</div>

Requires: ux.min.css

<div class="flex flex-wrap gap-2">
  <span class="inline-flex items-center gap-1.5 py-1 px-2 text-xs font-semibold rounded-full text-success" style="background-color: color-mix(in oklch, var(--color-success) 12%, transparent);"><span class="size-1.5 rounded-full bg-success shrink-0"></span> Active</span>
  <span class="inline-flex items-center gap-1.5 py-1 px-2 text-xs font-semibold rounded-full text-warning" style="background-color: color-mix(in oklch, var(--color-warning) 12%, transparent);"><span class="size-1.5 rounded-full bg-warning shrink-0"></span> Pending</span>
  <span class="inline-flex items-center gap-1.5 py-1 px-2 text-xs font-semibold rounded-full text-error" style="background-color: color-mix(in oklch, var(--color-error) 12%, transparent);"><span class="size-1.5 rounded-full bg-error shrink-0"></span> Error</span>
  <span class="inline-flex items-center gap-1.5 py-1 px-2 text-xs font-semibold rounded-full text-info" style="background-color: color-mix(in oklch, var(--color-info) 12%, transparent);"><span class="size-1.5 rounded-full bg-info shrink-0"></span> Info</span>
  <span class="inline-flex items-center gap-1.5 py-1 px-2 text-xs font-semibold rounded-full text-neutral" style="background-color: color-mix(in oklch, var(--color-neutral) 10%, transparent);"><span class="size-1.5 rounded-full bg-neutral shrink-0"></span> Offline</span>
</div>

Requires: tw.min.css

// No JavaScript required

Pulse Animation

Preview

Live Recording

<div class="flex flex-wrap gap-2">
  <span class="status-badge status-badge-success status-badge-pulse"><span class="status-badge-dot"></span> Live</span>
  <span class="status-badge status-badge-error status-badge-pulse"><span class="status-badge-dot"></span> Recording</span>
</div>

Requires: ux.min.css

<div class="flex flex-wrap gap-2">
  <span class="inline-flex items-center gap-1.5 py-1 px-2 text-xs font-semibold rounded-full text-success" style="background-color: color-mix(in oklch, var(--color-success) 12%, transparent);"><span class="size-1.5 rounded-full bg-success shrink-0 animate-pulse"></span> Live</span>
  <span class="inline-flex items-center gap-1.5 py-1 px-2 text-xs font-semibold rounded-full text-error" style="background-color: color-mix(in oklch, var(--color-error) 12%, transparent);"><span class="size-1.5 rounded-full bg-error shrink-0 animate-pulse"></span> Recording</span>
</div>

Requires: tw.min.css

// No JavaScript required

Sizes

Preview

Small Default Large

<div class="flex flex-wrap items-center gap-2">
  <span class="status-badge status-badge-success status-badge-sm"><span class="status-badge-dot"></span> Small</span>
  <span class="status-badge status-badge-success"><span class="status-badge-dot"></span> Default</span>
  <span class="status-badge status-badge-success status-badge-lg"><span class="status-badge-dot"></span> Large</span>
</div>

Requires: ux.min.css

<div class="flex flex-wrap items-center gap-2">
  <span class="inline-flex items-center gap-1 py-0.5 px-1.5 text-[0.625rem] font-semibold rounded-full text-success" style="background-color: color-mix(in oklch, var(--color-success) 12%, transparent);"><span class="size-[5px] rounded-full bg-success shrink-0"></span> Small</span>
  <span class="inline-flex items-center gap-1.5 py-1 px-2 text-xs font-semibold rounded-full text-success" style="background-color: color-mix(in oklch, var(--color-success) 12%, transparent);"><span class="size-1.5 rounded-full bg-success shrink-0"></span> Default</span>
  <span class="inline-flex items-center gap-2 py-1.5 px-3 text-sm font-semibold rounded-full text-success" style="background-color: color-mix(in oklch, var(--color-success) 12%, transparent);"><span class="size-2 rounded-full bg-success shrink-0"></span> Large</span>
</div>

Requires: tw.min.css

// No JavaScript required

Dot Only

Preview

<div class="flex flex-wrap items-center gap-3">
  <span class="status-badge status-badge-success status-badge-dot-only status-badge-sm"><span class="status-badge-dot"></span></span>
  <span class="status-badge status-badge-success status-badge-dot-only"><span class="status-badge-dot"></span></span>
  <span class="status-badge status-badge-success status-badge-dot-only status-badge-lg"><span class="status-badge-dot"></span></span>
  <span class="status-badge status-badge-error status-badge-dot-only status-badge-pulse"><span class="status-badge-dot"></span></span>
</div>

Requires: ux.min.css

<div class="flex flex-wrap items-center gap-3">
  <span class="size-2 rounded-full bg-success"></span>
  <span class="size-1.5 rounded-full bg-success"></span>
  <span class="size-3 rounded-full bg-success"></span>
  <span class="size-1.5 rounded-full bg-error animate-pulse"></span>
</div>

Requires: tw.min.css

// No JavaScript required

Outlined & Solid

Preview

Outlined Outlined Solid Solid

<div class="flex flex-wrap gap-2">
  <span class="status-badge status-badge-success status-badge-outlined"><span class="status-badge-dot"></span> Outlined</span>
  <span class="status-badge status-badge-error status-badge-outlined"><span class="status-badge-dot"></span> Outlined</span>
  <span class="status-badge status-badge-success status-badge-solid"><span class="status-badge-dot"></span> Solid</span>
  <span class="status-badge status-badge-error status-badge-solid"><span class="status-badge-dot"></span> Solid</span>
</div>

Requires: ux.min.css

<div class="flex flex-wrap gap-2">
  <span class="inline-flex items-center gap-1.5 py-1 px-2 text-xs font-semibold rounded-full bg-transparent border border-success text-success"><span class="size-1.5 rounded-full bg-success shrink-0"></span> Outlined</span>
  <span class="inline-flex items-center gap-1.5 py-1 px-2 text-xs font-semibold rounded-full bg-transparent border border-error text-error"><span class="size-1.5 rounded-full bg-error shrink-0"></span> Outlined</span>
  <span class="inline-flex items-center gap-1.5 py-1 px-2 text-xs font-semibold rounded-full bg-success text-white"><span class="size-1.5 rounded-full bg-white shrink-0"></span> Solid</span>
  <span class="inline-flex items-center gap-1.5 py-1 px-2 text-xs font-semibold rounded-full bg-error text-white"><span class="size-1.5 rounded-full bg-white shrink-0"></span> Solid</span>
</div>

Requires: tw.min.css

// No JavaScript required

On Avatar (Corner Positioning)

Preview

<div class="flex gap-6">
  <div class="relative inline-flex">
    <div class="avatar avatar-placeholder">AB</div>
    <span class="status-badge status-badge-success status-badge-dot-only status-badge-corner status-badge-corner-br"><span class="status-badge-dot"></span></span>
  </div>
  <div class="relative inline-flex">
    <div class="avatar avatar-placeholder">CD</div>
    <span class="status-badge status-badge-error status-badge-dot-only status-badge-pulse status-badge-corner status-badge-corner-br"><span class="status-badge-dot"></span></span>
  </div>
  <div class="relative inline-flex">
    <div class="avatar avatar-placeholder">EF</div>
    <span class="status-badge status-badge-offline status-badge-dot-only status-badge-corner status-badge-corner-br"><span class="status-badge-dot"></span></span>
  </div>
</div>

Requires: ux.min.css

<div class="flex gap-6">
  <div class="relative inline-flex">
    <div class="size-10 rounded-full bg-primary text-primary-content flex items-center justify-center text-sm font-semibold">AB</div>
    <span class="absolute bottom-0 right-0 size-1.5 rounded-full bg-success"></span>
  </div>
  <div class="relative inline-flex">
    <div class="size-10 rounded-full bg-primary text-primary-content flex items-center justify-center text-sm font-semibold">CD</div>
    <span class="absolute bottom-0 right-0 size-1.5 rounded-full bg-error animate-pulse"></span>
  </div>
  <div class="relative inline-flex">
    <div class="size-10 rounded-full bg-primary text-primary-content flex items-center justify-center text-sm font-semibold">EF</div>
    <span class="absolute bottom-0 right-0 size-1.5 rounded-full bg-neutral"></span>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required

Class	Description
`.status-badge`	Base status badge container
`.status-badge-dot`	Colored dot indicator
`.status-badge-pulse`	Animating dot pulse
`.status-badge-success/active/online`	Green variant
`.status-badge-warning/pending`	Yellow variant
`.status-badge-error/danger/busy/dnd`	Red variant
`.status-badge-info/primary`	Blue variant
`.status-badge-offline/inactive`	Neutral variant
`.status-badge-away/idle`	Yellow/warning variant
`.status-badge-draft`	Muted draft variant
`.status-badge-archived`	Muted archived variant
`.status-badge-beta/new`	Purple/secondary variant
`.status-badge-sm`	Small size
`.status-badge-lg`	Large size
`.status-badge-dot-only`	Dot without text
`.status-badge-outlined`	Border-only variant
`.status-badge-solid`	Solid filled variant
`.status-badge-icon`	Icon slot (12px) instead of dot
`.status-badge.glass`	Glass morphism variant
`.status-badge-corner`	Absolute positioning
`.status-badge-corner-br/bl/tr/tl`	Corner positions