Counter Chip
Chip with a number badge inside; click − / + to decrement/increment with aria-valuenow updated for screen readers. The Gmail label-count pattern.
Counter Chip the 16th of 20 designs in the 20 CSS Tags & Chips Designs collection. The design pairs CSS styling with a small amount of JavaScript for interactivity. Copy the HTML, CSS and JavaScript panels below into your project — the JS is self-contained, has zero dependencies, and is safe to drop into any framework (React, Vue, Svelte, plain HTML). The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="ctc-counter">
<span class="ctc-counter-chip" role="group" aria-label="Inbox count">
<button type="button" data-ctc-cnt="-1" aria-label="Decrement">−</button>
<span class="ctc-counter-label">Inbox</span>
<span class="ctc-counter-num" aria-live="polite" aria-valuenow="12">12</span>
<button type="button" data-ctc-cnt="+1" aria-label="Increment">+</button>
</span>
</div> .ctc-counter {
display: flex;
}
.ctc-counter-chip {
display: inline-flex;
align-items: center;
padding: 0;
background: #1f1f2e;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px;
overflow: hidden;
font:
600 12px/1 system-ui,
sans-serif;
color: #f0eeff;
}
.ctc-counter-chip button {
width: 26px;
height: 28px;
background: transparent;
border: 0;
color: #c4b5fd;
font:
700 14px/1 system-ui,
sans-serif;
cursor: pointer;
transition:
background 0.15s,
color 0.15s;
}
.ctc-counter-chip button:hover {
background: rgba(124, 108, 255, 0.18);
color: #fff;
}
.ctc-counter-label {
padding: 0 6px 0 10px;
}
.ctc-counter-num {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
height: 18px;
margin-right: 4px;
padding: 0 6px;
background: rgba(124, 108, 255, 0.22);
color: #c4b5fd;
border-radius: 999px;
font:
700 11px/1 ui-monospace,
monospace;
} (function () {
document.querySelectorAll(".ctc-counter-chip").forEach(function (chip) {
var num = chip.querySelector(".ctc-counter-num");
chip.querySelectorAll("[data-ctc-cnt]").forEach(function (btn) {
btn.addEventListener("click", function () {
var n = parseInt(num.textContent, 10) || 0;
var inc = parseInt(btn.getAttribute("data-ctc-cnt"), 10);
var v = Math.max(0, n + inc);
num.textContent = v;
num.setAttribute("aria-valuenow", v);
});
});
});
})();