Status Indicator

Simple inline dot + label for displaying status. Lightweight alternative to status-badge for plain text contexts like tables, lists, and profiles.

Color Variants

Preview

Online Away Busy Info Offline

<div class="flex flex-wrap gap-4">
  <span class="status-indicator status-indicator-success">
    <span class="status-indicator-dot"></span>
    <span class="status-indicator-label">Online</span>
  </span>
  <span class="status-indicator status-indicator-warning">
    <span class="status-indicator-dot"></span>
    <span class="status-indicator-label">Away</span>
  </span>
  <span class="status-indicator status-indicator-error">
    <span class="status-indicator-dot"></span>
    <span class="status-indicator-label">Busy</span>
  </span>
  <span class="status-indicator status-indicator-info">
    <span class="status-indicator-dot"></span>
    <span class="status-indicator-label">Info</span>
  </span>
  <span class="status-indicator status-indicator-neutral">
    <span class="status-indicator-dot"></span>
    <span class="status-indicator-label">Offline</span>
  </span>
</div>

Requires: ux.min.css

<div class="flex flex-wrap gap-4">
  <span class="inline-flex items-center gap-1 text-sm text-base-content">
    <span class="size-2 rounded-full bg-success shrink-0"></span> Online
  </span>
  <span class="inline-flex items-center gap-1 text-sm text-base-content">
    <span class="size-2 rounded-full bg-warning shrink-0"></span> Away
  </span>
  <span class="inline-flex items-center gap-1 text-sm text-base-content">
    <span class="size-2 rounded-full bg-error shrink-0"></span> Busy
  </span>
  <span class="inline-flex items-center gap-1 text-sm text-base-content">
    <span class="size-2 rounded-full bg-info shrink-0"></span> Info
  </span>
  <span class="inline-flex items-center gap-1 text-sm text-base-content">
    <span class="size-2 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-4">
  <span class="status-indicator status-indicator-success status-indicator-pulse">
    <span class="status-indicator-dot"></span>
    <span class="status-indicator-label">Live</span>
  </span>
  <span class="status-indicator status-indicator-error status-indicator-pulse">
    <span class="status-indicator-dot"></span>
    <span class="status-indicator-label">Recording</span>
  </span>
</div>

Requires: ux.min.css

<div class="flex flex-wrap gap-4">
  <span class="inline-flex items-center gap-1 text-sm text-base-content">
    <span class="relative size-2 rounded-full bg-success shrink-0"><span class="absolute inset-0 rounded-full bg-success animate-ping"></span></span> Live
  </span>
  <span class="inline-flex items-center gap-1 text-sm text-base-content">
    <span class="relative size-2 rounded-full bg-error shrink-0"><span class="absolute inset-0 rounded-full bg-error animate-ping"></span></span> Recording
  </span>
</div>

Requires: tw.min.css

// No JavaScript required

Sizes

Preview

Small Default Large

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

Requires: ux.min.css

<div class="flex flex-wrap items-center gap-4">
  <span class="inline-flex items-center gap-1 text-xs text-base-content">
    <span class="size-1.5 rounded-full bg-success shrink-0"></span> Small
  </span>
  <span class="inline-flex items-center gap-1 text-sm text-base-content">
    <span class="size-2 rounded-full bg-success shrink-0"></span> Default
  </span>
  <span class="inline-flex items-center gap-1 text-base text-base-content">
    <span class="size-2.5 rounded-full bg-success shrink-0"></span> Large
  </span>
</div>

Requires: tw.min.css

// No JavaScript required

Dot Only

Preview

Hidden

<div class="flex flex-wrap items-center gap-3">
  <span class="status-indicator status-indicator-success status-indicator-dot-only">
    <span class="status-indicator-dot"></span>
    <span class="status-indicator-label">Hidden</span>
  </span>
  <span class="status-indicator status-indicator-warning status-indicator-dot-only">
    <span class="status-indicator-dot"></span>
  </span>
  <span class="status-indicator status-indicator-error status-indicator-dot-only status-indicator-pulse">
    <span class="status-indicator-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-2 rounded-full bg-warning"></span>
  <span class="relative size-2 rounded-full bg-error"><span class="absolute inset-0 rounded-full bg-error animate-ping"></span></span>
</div>

Requires: tw.min.css

// No JavaScript required

Filled & Outline Variants

Preview

Filled Filled Outline Outline

<div class="flex flex-wrap gap-3">
  <span class="status-indicator status-indicator-success status-indicator-filled">
    <span class="status-indicator-dot"></span>
    <span class="status-indicator-label">Filled</span>
  </span>
  <span class="status-indicator status-indicator-error status-indicator-filled">
    <span class="status-indicator-dot"></span>
    <span class="status-indicator-label">Filled</span>
  </span>
  <span class="status-indicator status-indicator-success status-indicator-outline">
    <span class="status-indicator-dot"></span>
    <span class="status-indicator-label">Outline</span>
  </span>
  <span class="status-indicator status-indicator-error status-indicator-outline">
    <span class="status-indicator-dot"></span>
    <span class="status-indicator-label">Outline</span>
  </span>
</div>

Requires: ux.min.css

<div class="flex flex-wrap gap-3">
  <span class="inline-flex items-center gap-1 text-sm py-1 px-2 rounded-full text-success" style="background-color: color-mix(in oklch, var(--color-success) 10%, transparent);">
    <span class="size-2 rounded-full bg-success shrink-0"></span> Filled
  </span>
  <span class="inline-flex items-center gap-1 text-sm py-1 px-2 rounded-full text-error" style="background-color: color-mix(in oklch, var(--color-error) 10%, transparent);">
    <span class="size-2 rounded-full bg-error shrink-0"></span> Filled
  </span>
  <span class="inline-flex items-center gap-1 text-sm py-1 px-2 rounded-full text-success border border-success">
    <span class="size-2 rounded-full bg-success shrink-0"></span> Outline
  </span>
  <span class="inline-flex items-center gap-1 text-sm py-1 px-2 rounded-full text-error border border-error">
    <span class="size-2 rounded-full bg-error shrink-0"></span> Outline
  </span>
</div>

Requires: tw.min.css

// No JavaScript required

With Ring (Avatar Overlay)

Preview

<div class="flex gap-6">
  <div class="relative inline-flex">
    <div class="avatar avatar-placeholder">AB</div>
    <span class="status-indicator status-indicator-success status-indicator-dot-only status-indicator-ring absolute bottom-0 right-0">
      <span class="status-indicator-dot"></span>
    </span>
  </div>
  <div class="relative inline-flex">
    <div class="avatar avatar-placeholder">CD</div>
    <span class="status-indicator status-indicator-error status-indicator-dot-only status-indicator-ring status-indicator-pulse absolute bottom-0 right-0">
      <span class="status-indicator-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-2 rounded-full bg-success" style="box-shadow: 0 0 0 2px var(--color-base-100);"></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-2 rounded-full bg-error animate-pulse" style="box-shadow: 0 0 0 2px var(--color-base-100);"></span>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required

Class	Description
`.status-indicator`	Base inline indicator (dot + label)
`.status-indicator-dot`	Colored dot (8px default)
`.status-indicator-label`	Text label
`.status-indicator-success`	Green dot
`.status-indicator-warning`	Yellow dot
`.status-indicator-error/danger`	Red dot
`.status-indicator-info`	Blue dot
`.status-indicator-neutral/offline/inactive`	Gray dot
`.status-indicator-online/active`	Green dot (alias)
`.status-indicator-busy`	Red dot (alias)
`.status-indicator-away/pending`	Yellow dot (alias)
`.status-indicator-pulse`	Animated pulse on dot
`.status-indicator-sm`	Small (6px dot, xs text)
`.status-indicator-lg`	Large (10px dot, base text)
`.status-indicator-dot-only`	Hides label, shows dot only
`.status-indicator-filled`	Tinted pill background
`.status-indicator-outline`	Border pill variant
`.status-indicator-ring`	White ring around dot (for avatar overlays)
`.status-indicator-hide-label-mobile`	Hide label on mobile (<768px)