Quantity Badge
Small numeric badges for showing item quantities, counts, and notifications on product cards and buttons.
Basic Quantity Badge
3
12
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
5
8
2
14
3
7
<!-- 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
2
5
1
<!-- 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
2
5
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 |