Quantity Badge

Small numeric badges for showing item quantities, counts, and notifications on product cards and buttons.

Basic Quantity Badge

99+

<div class="quantity-badge">
  <button class="btn">Cart</button>
  <span class="quantity-badge-count">3</span>
</div>

<div class="quantity-badge">
  <button class="btn">Orders</button>
  <span class="quantity-badge-count">12</span>
</div>

<div class="quantity-badge">
  <button class="btn">Notifications</button>
  <span class="quantity-badge-count">99+</span>
</div>

Requires: ux.min.css

<div class="relative inline-flex">
  <button class="btn">Cart</button>
  <span class="absolute flex items-center justify-center font-semibold -top-1.5 -right-1.5 min-w-[18px] h-[18px] px-[5px] bg-error text-white text-[11px] leading-none rounded-full border-2 border-base-100">3</span>
</div>

<div class="relative inline-flex">
  <button class="btn">Orders</button>
  <span class="absolute flex items-center justify-center font-semibold -top-1.5 -right-1.5 min-w-[18px] h-[18px] px-[5px] bg-error text-white text-[11px] leading-none rounded-full border-2 border-base-100">12</span>
</div>

<div class="relative inline-flex">
  <button class="btn">Notifications</button>
  <span class="absolute flex items-center justify-center font-semibold -top-1.5 -right-1.5 min-w-[18px] h-[18px] px-[5px] bg-error text-white text-[11px] leading-none rounded-full border-2 border-base-100">99+</span>
</div>

Requires: tw.min.css

// Animate badge on update:
function updateBadge(el, count) {
  el.textContent = count > 99 ? '99+' : count;
  el.classList.add('quantity-badge-count-animate');
  el.addEventListener('animationend', () => {
    el.classList.remove('quantity-badge-count-animate');
  }, { once: true });
}

Color & Style Variants

<!-- Solid colors -->
<div class="quantity-badge quantity-badge-primary">
  <button class="btn">ERPlora Products</button>
  <span class="quantity-badge-count">5</span>
</div>

<div class="quantity-badge quantity-badge-success">
  <button class="btn">Completed</button>
  <span class="quantity-badge-count">8</span>
</div>

<div class="quantity-badge quantity-badge-warning">
  <button class="btn">Pending</button>
  <span class="quantity-badge-count">2</span>
</div>

<!-- Soft variants -->
<div class="quantity-badge quantity-badge-primary-soft">
  <button class="btn">Inbox</button>
  <span class="quantity-badge-count">14</span>
</div>

<div class="quantity-badge quantity-badge-danger-soft">
  <button class="btn">Issues</button>
  <span class="quantity-badge-count">3</span>
</div>

<!-- Outline variant -->
<div class="quantity-badge quantity-badge-outline quantity-badge-primary">
  <button class="btn">Alerts</button>
  <span class="quantity-badge-count">7</span>
</div>

Requires: ux.min.css

<!-- Solid colors -->
<div class="relative inline-flex">
  <button class="btn">ERPlora Products</button>
  <span class="absolute flex items-center justify-center font-semibold -top-1.5 -right-1.5 min-w-[18px] h-[18px] px-[5px] bg-primary text-white text-[11px] leading-none rounded-full border-2 border-base-100">5</span>
</div>

<div class="relative inline-flex">
  <button class="btn">Completed</button>
  <span class="absolute flex items-center justify-center font-semibold -top-1.5 -right-1.5 min-w-[18px] h-[18px] px-[5px] bg-success text-white text-[11px] leading-none rounded-full border-2 border-base-100">8</span>
</div>

<div class="relative inline-flex">
  <button class="btn">Pending</button>
  <span class="absolute flex items-center justify-center font-semibold -top-1.5 -right-1.5 min-w-[18px] h-[18px] px-[5px] bg-warning text-[#111] text-[11px] leading-none rounded-full border-2 border-base-100">2</span>
</div>

<!-- Soft variants -->
<div class="relative inline-flex">
  <button class="btn">Inbox</button>
  <span class="absolute flex items-center justify-center font-semibold -top-1.5 -right-1.5 min-w-[18px] h-[18px] px-[5px] bg-primary/15 text-primary text-[11px] leading-none rounded-full border-2 border-primary/15">14</span>
</div>

<div class="relative inline-flex">
  <button class="btn">Issues</button>
  <span class="absolute flex items-center justify-center font-semibold -top-1.5 -right-1.5 min-w-[18px] h-[18px] px-[5px] bg-error/15 text-error text-[11px] leading-none rounded-full border-2 border-error/15">3</span>
</div>

<!-- Outline variant -->
<div class="relative inline-flex">
  <button class="btn">Alerts</button>
  <span class="absolute flex items-center justify-center font-semibold -top-1.5 -right-1.5 min-w-[18px] h-[18px] px-[5px] bg-base-100 text-primary border-2 border-primary text-[11px] leading-none rounded-full">7</span>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

Dot, Pulse & Position

<!-- Dot indicator (no number) -->
<div class="quantity-badge">
  <button class="btn">Messages</button>
  <span class="quantity-badge-count quantity-badge-count-dot"></span>
</div>

<!-- Pulsing dot -->
<div class="quantity-badge">
  <button class="btn">Live Orders</button>
  <span class="quantity-badge-count quantity-badge-count-dot quantity-badge-count-pulse"></span>
</div>

<!-- Position variants -->
<div class="quantity-badge quantity-badge-top-left">
  <button class="btn">Top Left</button>
  <span class="quantity-badge-count">2</span>
</div>

<div class="quantity-badge quantity-badge-bottom-right">
  <button class="btn">Bottom Right</button>
  <span class="quantity-badge-count">5</span>
</div>

<div class="quantity-badge quantity-badge-bottom-left">
  <button class="btn">Bottom Left</button>
  <span class="quantity-badge-count">1</span>
</div>

Requires: ux.min.css

<!-- Dot indicator -->
<div class="relative inline-flex">
  <button class="btn">Messages</button>
  <span class="absolute w-2.5 h-2.5 min-w-0 p-0 bg-error rounded-full -top-0.5 -right-0.5 border-2 border-base-100"></span>
</div>

<!-- Pulsing dot -->
<div class="relative inline-flex">
  <button class="btn">Live Orders</button>
  <span class="absolute w-2.5 h-2.5 min-w-0 p-0 bg-error rounded-full -top-0.5 -right-0.5 border-2 border-base-100 animate-pulse"></span>
</div>

<!-- Position variants -->
<div class="relative inline-flex">
  <button class="btn">Top Left</button>
  <span class="absolute flex items-center justify-center font-semibold -top-1.5 -left-1.5 right-auto min-w-[18px] h-[18px] px-[5px] bg-error text-white text-[11px] leading-none rounded-full border-2 border-base-100">2</span>
</div>

<div class="relative inline-flex">
  <button class="btn">Bottom Right</button>
  <span class="absolute flex items-center justify-center font-semibold -bottom-1.5 -right-1.5 top-auto min-w-[18px] h-[18px] px-[5px] bg-error text-white text-[11px] leading-none rounded-full border-2 border-base-100">5</span>
</div>

<div class="relative inline-flex">
  <button class="btn">Bottom Left</button>
  <span class="absolute flex items-center justify-center font-semibold -bottom-1.5 -left-1.5 top-auto right-auto min-w-[18px] h-[18px] px-[5px] bg-error text-white text-[11px] leading-none rounded-full border-2 border-base-100">1</span>
</div>

Requires: tw.min.css

// Toggle badge visibility:
function hideBadge(el) {
  el.classList.add('quantity-badge-count-hidden');
}
function showBadge(el) {
  el.classList.remove('quantity-badge-count-hidden');
}

Cart & Stepper Variants

ERPlora Inventory 42

<!-- Cart variant (inline +/- controls) -->
<div class="quantity-badge-cart">
  <button class="quantity-badge-btn" aria-label="Decrease">-</button>
  <span class="quantity-badge-value">2</span>
  <button class="quantity-badge-btn" aria-label="Increase">+</button>
</div>

<!-- Stepper variant -->
<div class="quantity-badge-stepper">
  <button class="quantity-badge-btn" aria-label="Decrease">-</button>
  <span class="quantity-badge-value">5</span>
  <button class="quantity-badge-btn" aria-label="Increase">+</button>
</div>

<!-- Inline badge variant -->
<div class="quantity-badge-inline">
  <span>ERPlora Inventory</span>
  <span class="quantity-badge-count">42</span>
</div>

Requires: ux.min.css

<!-- Cart variant -->
<div class="inline-flex items-center gap-2 px-2 py-1 bg-base-100 border border-base-300 rounded-full">
  <button class="flex items-center justify-center w-6 h-6 bg-base-200 rounded-full text-base-content text-base font-medium border-none cursor-pointer hover:bg-base-300 active:scale-95" aria-label="Decrease">-</button>
  <span class="text-center font-semibold min-w-[24px] text-base-content">2</span>
  <button class="flex items-center justify-center w-6 h-6 bg-base-200 rounded-full text-base-content text-base font-medium border-none cursor-pointer hover:bg-base-300 active:scale-95" aria-label="Increase">+</button>
</div>

<!-- Stepper variant -->
<div class="inline-flex items-center overflow-hidden bg-base-200 rounded-xl">
  <button class="flex items-center justify-center w-9 h-9 bg-transparent text-base-content text-lg border-none cursor-pointer hover:bg-base-300" aria-label="Decrease">-</button>
  <span class="flex items-center justify-center font-semibold min-w-[40px] h-9 text-base-content border-l border-r border-base-300">5</span>
  <button class="flex items-center justify-center w-9 h-9 bg-transparent text-base-content text-lg border-none cursor-pointer hover:bg-base-300" aria-label="Increase">+</button>
</div>

<!-- Inline badge -->
<div class="inline-flex items-center gap-1">
  <span>ERPlora Inventory</span>
  <span class="flex items-center justify-center font-semibold min-w-[18px] h-[18px] px-[5px] bg-error text-white text-[11px] leading-none rounded-full">42</span>
</div>

Requires: tw.min.css

// Cart/stepper quantity control:
document.querySelectorAll('.quantity-badge-cart, .quantity-badge-stepper').forEach(el => {
  const value = el.querySelector('.quantity-badge-value');
  const [decBtn, incBtn] = el.querySelectorAll('.quantity-badge-btn');
  decBtn.addEventListener('click', () => {
    const n = Math.max(0, parseInt(value.textContent) - 1);
    value.textContent = n;
  });
  incBtn.addEventListener('click', () => {
    value.textContent = parseInt(value.textContent) + 1;
  });
});

Classes Reference

Class	Description
.quantity-badge	Base wrapper (relative inline-flex)
.quantity-badge-count	The numeric badge element
.quantity-badge-count-dot	Small dot indicator (no text)
.quantity-badge-count-pulse	Pulsing animation on the badge
.quantity-badge-count-animate	Pop-in animation on update
.quantity-badge-count-hidden	Scale to zero (hidden)
.quantity-badge-sm / -lg	Size variants
.quantity-badge-top-left	Position badge top-left
.quantity-badge-bottom-right	Position badge bottom-right
.quantity-badge-bottom-left	Position badge bottom-left
.quantity-badge-inline	Inline badge (no absolute positioning)
.quantity-badge-primary	Primary color badge
.quantity-badge-success	Success color badge
.quantity-badge-warning	Warning color badge
.quantity-badge-danger	Danger/error color badge
.quantity-badge-*-soft	Soft tinted variants (primary, success, danger)
.quantity-badge-outline	Outline style badge
.quantity-badge-cart	Cart pill with +/- buttons
.quantity-badge-stepper	Stepper with +/- buttons
.quantity-badge-btn	Button inside cart/stepper
.quantity-badge-value	Value display inside cart/stepper