How to make a badge
Short answer
A badge is a span with a background, padding and rounding:
<style>
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; vertical-align: middle; }
</style>
<h3>Wireless mouse <span class="badge" style="background: crimson; color: white;">New</span></h3>
<span class="badge" style="background: honeydew; color: seagreen;">In stock</span>
<span class="badge" style="background: lightyellow; color: darkgoldenrod;">-20%</span>A counter on a button
A notification count in the corner of a button: the button gets position: relative, the counter absolute:
<style>
.bell { position: relative; margin: 12px; padding: 8px 14px; }
.count { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box;
border-radius: 10px; background: crimson; color: white; font-size: 12px; line-height: 20px; }
</style>
<button class="bell">Inbox <span class="count">7</span></button>
<button class="bell">Cart <span class="count">12</span></button>min-width and padding instead of a fixed width let the circle stretch into a pill for two-digit numbers.
For screen readers
"Inbox 7" is clear to the eye but not by ear. Add hidden explanatory text or an aria-label on the button, for example "Inbox, 7 unread".
Common mistake
Badges that differ only by color: green means "in stock", red means "sold out". People with color vision deficiency cannot tell them apart. Put a word in the badge and keep color as an extra hint.
Functions used in this recipe
- <span> — An inline container without meaning: used to style part of a text.
- border-radius — Rounds the corners of an element.
- position — How an element is positioned: in the normal flow or by offsets.