Stock Indicator

Inline stock status indicators for POS product displays with colored dot, label, count, and multiple style variants.

Stock Status

In Stock 142

Low Stock 3

Out of Stock 0

Pre-order

Discontinued

<div class="stock-indicator stock-indicator-in-stock">
  <span class="stock-indicator-dot"></span>
  <span class="stock-indicator-label">In Stock</span>
  <span class="stock-indicator-count">142</span>
</div>

<div class="stock-indicator stock-indicator-low-stock">
  <span class="stock-indicator-dot"></span>
  <span class="stock-indicator-label">Low Stock</span>
  <span class="stock-indicator-count">3</span>
</div>

<div class="stock-indicator stock-indicator-out-of-stock">
  <span class="stock-indicator-dot"></span>
  <span class="stock-indicator-label">Out of Stock</span>
  <span class="stock-indicator-count">0</span>
</div>

<div class="stock-indicator stock-indicator-pre-order">
  <span class="stock-indicator-dot"></span>
  <span class="stock-indicator-label">Pre-order</span>
</div>

<div class="stock-indicator stock-indicator-discontinued">
  <span class="stock-indicator-dot"></span>
  <span class="stock-indicator-label">Discontinued</span>
</div>

Requires: ux.min.css

<div class="inline-flex items-center gap-1.5 h-6">
  <span class="size-2 rounded-full bg-success"></span>
  <span class="text-xs font-medium text-success">In Stock</span>
  <span class="text-xs text-base-content/50">142</span>
</div>

<div class="inline-flex items-center gap-1.5 h-6">
  <span class="size-2 rounded-full bg-warning"></span>
  <span class="text-xs font-medium text-warning">Low Stock</span>
  <span class="text-xs text-base-content/50">3</span>
</div>

<div class="inline-flex items-center gap-1.5 h-6">
  <span class="size-2 rounded-full bg-error"></span>
  <span class="text-xs font-medium text-error">Out of Stock</span>
  <span class="text-xs text-base-content/50">0</span>
</div>

<div class="inline-flex items-center gap-1.5 h-6">
  <span class="size-2 rounded-full bg-info"></span>
  <span class="text-xs font-medium text-info">Pre-order</span>
</div>

<div class="inline-flex items-center gap-1.5 h-6">
  <span class="size-2 rounded-full bg-base-content/30"></span>
  <span class="text-xs font-medium text-base-content/50">Discontinued</span>
</div>

Requires: tw.min.css

// Update stock indicator based on count
function updateStockIndicator(el, count) {
  el.classList.remove('stock-indicator-in-stock', 'stock-indicator-low-stock', 'stock-indicator-out-of-stock');
  if (count <= 0) el.classList.add('stock-indicator-out-of-stock');
  else if (count <= 5) el.classList.add('stock-indicator-low-stock');
  else el.classList.add('stock-indicator-in-stock');
  const countEl = el.querySelector('.stock-indicator-count');
  if (countEl) countEl.textContent = count;
}

Badge & Pill

In Stock

Low Stock 3

Out of Stock

Pre-order

Available

Low 5

Sold Out

<!-- Badge style (with background) -->
<div class="stock-indicator stock-indicator-badge stock-indicator-in-stock">
  <span class="stock-indicator-dot"></span>
  <span class="stock-indicator-label">In Stock</span>
</div>

<div class="stock-indicator stock-indicator-badge stock-indicator-low-stock">
  <span class="stock-indicator-dot"></span>
  <span class="stock-indicator-label">Low Stock</span>
  <span class="stock-indicator-count">3</span>
</div>

<div class="stock-indicator stock-indicator-badge stock-indicator-out-of-stock">
  <span class="stock-indicator-dot"></span>
  <span class="stock-indicator-label">Out of Stock</span>
</div>

<div class="stock-indicator stock-indicator-badge stock-indicator-pre-order">
  <span class="stock-indicator-dot"></span>
  <span class="stock-indicator-label">Pre-order</span>
</div>

<!-- Pill style -->
<div class="stock-indicator stock-indicator-pill stock-indicator-in-stock">
  <span class="stock-indicator-dot"></span>
  <span class="stock-indicator-label">Available</span>
</div>

<div class="stock-indicator stock-indicator-pill stock-indicator-low-stock">
  <span class="stock-indicator-dot"></span>
  <span class="stock-indicator-label">Low</span>
  <span class="stock-indicator-count">5</span>
</div>

<div class="stock-indicator stock-indicator-pill stock-indicator-out-of-stock">
  <span class="stock-indicator-dot"></span>
  <span class="stock-indicator-label">Sold Out</span>
</div>

Requires: ux.min.css

<!-- Badge: adds tinted background -->
<div class="inline-flex items-center gap-1.5 h-6 px-2 py-0.5 rounded bg-success/10">
  <span class="size-2 rounded-full bg-success"></span>
  <span class="text-xs font-medium text-success">In Stock</span>
</div>

<div class="inline-flex items-center gap-1.5 h-6 px-2 py-0.5 rounded bg-warning/10">
  <span class="size-2 rounded-full bg-warning"></span>
  <span class="text-xs font-medium text-warning">Low Stock</span>
  <span class="text-xs text-warning/70">3</span>
</div>

<div class="inline-flex items-center gap-1.5 h-6 px-2 py-0.5 rounded bg-error/10">
  <span class="size-2 rounded-full bg-error"></span>
  <span class="text-xs font-medium text-error">Out of Stock</span>
</div>

<div class="inline-flex items-center gap-1.5 h-6 px-2 py-0.5 rounded bg-info/10">
  <span class="size-2 rounded-full bg-info"></span>
  <span class="text-xs font-medium text-info">Pre-order</span>
</div>

<!-- Pill: fully rounded -->
<div class="inline-flex items-center gap-1.5 h-6 px-2.5 py-0.5 rounded-full bg-success/10">
  <span class="size-2 rounded-full bg-success"></span>
  <span class="text-xs font-medium text-success">Available</span>
</div>

<div class="inline-flex items-center gap-1.5 h-6 px-2.5 py-0.5 rounded-full bg-warning/10">
  <span class="size-2 rounded-full bg-warning"></span>
  <span class="text-xs font-medium text-warning">Low</span>
  <span class="text-xs text-warning/70">5</span>
</div>

<div class="inline-flex items-center gap-1.5 h-6 px-2.5 py-0.5 rounded-full bg-error/10">
  <span class="size-2 rounded-full bg-error"></span>
  <span class="text-xs font-medium text-error">Sold Out</span>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component
// .stock-indicator-badge adds tinted background
// .stock-indicator-pill uses fully rounded corners

Sizes & Minimal

In Stock

In Stock 142

<!-- Small -->
<div class="stock-indicator stock-indicator-sm stock-indicator-in-stock">
  <span class="stock-indicator-dot"></span>
  <span class="stock-indicator-label">In Stock</span>
</div>

<!-- Default -->
<div class="stock-indicator stock-indicator-in-stock">
  <span class="stock-indicator-dot"></span>
  <span class="stock-indicator-label">In Stock</span>
</div>

<!-- Large -->
<div class="stock-indicator stock-indicator-lg stock-indicator-in-stock">
  <span class="stock-indicator-dot"></span>
  <span class="stock-indicator-label">In Stock</span>
  <span class="stock-indicator-count">142</span>
</div>

<!-- Minimal (dot only) -->
<span style="display: inline-flex; align-items: center; gap: 0.75rem;">
  <div class="stock-indicator stock-indicator-minimal stock-indicator-in-stock">
    <span class="stock-indicator-dot"></span>
  </div>
  <div class="stock-indicator stock-indicator-minimal stock-indicator-low-stock">
    <span class="stock-indicator-dot"></span>
  </div>
  <div class="stock-indicator stock-indicator-minimal stock-indicator-out-of-stock">
    <span class="stock-indicator-dot"></span>
  </div>
  <div class="stock-indicator stock-indicator-minimal stock-indicator-pre-order">
    <span class="stock-indicator-dot"></span>
  </div>
  <div class="stock-indicator stock-indicator-minimal stock-indicator-discontinued">
    <span class="stock-indicator-dot"></span>
  </div>
</span>

Requires: ux.min.css

<!-- Small -->
<div class="inline-flex items-center gap-1 h-5">
  <span class="size-1.5 rounded-full bg-success"></span>
  <span class="text-[10px] font-medium text-success">In Stock</span>
</div>

<!-- Default -->
<div class="inline-flex items-center gap-1.5 h-6">
  <span class="size-2 rounded-full bg-success"></span>
  <span class="text-xs font-medium text-success">In Stock</span>
</div>

<!-- Large -->
<div class="inline-flex items-center gap-2 h-8">
  <span class="size-2.5 rounded-full bg-success"></span>
  <span class="text-sm font-medium text-success">In Stock</span>
  <span class="text-sm text-base-content/50">142</span>
</div>

<!-- Minimal (dot only) -->
<span class="inline-flex items-center gap-3">
  <span class="size-2 rounded-full bg-success"></span>
  <span class="size-2 rounded-full bg-warning"></span>
  <span class="size-2 rounded-full bg-error"></span>
  <span class="size-2 rounded-full bg-info"></span>
  <span class="size-2 rounded-full bg-base-content/30"></span>
</span>

Requires: tw.min.css

// No JavaScript required - pure CSS component
// .stock-indicator-sm / .stock-indicator-lg control sizing
// .stock-indicator-minimal hides label, shows dot only

Classes Reference

Class	Description
.stock-indicator	Base container (inline-flex, 24px height)
.stock-indicator-dot	Colored dot (8px circle)
.stock-indicator-label	Text label
.stock-indicator-count	Numeric count
.stock-indicator-in-stock	Green / success status
.stock-indicator-low-stock	Yellow / warning status
.stock-indicator-out-of-stock	Red / error status
.stock-indicator-pre-order	Blue / info status
.stock-indicator-discontinued	Gray / neutral status
.stock-indicator-sm	Small size variant
.stock-indicator-lg	Large size variant
.stock-indicator-badge	Badge style with tinted background
.stock-indicator-pill	Pill shape (fully rounded)
.stock-indicator-minimal	Dot only, no text
.stock-indicator-with-bar	Progress bar variant