Design Atlas
한국어
▣ UI components

Badge

배지

A small dot or number attached to the corner of an icon or button, reporting a count or a status.

Also known as: CounterNotification dotStatus badge
···
html
<div class="bgw">
  <div class="bgi"><span class="ico">🔔</span><span class="badge" id="bd">1</span></div>
  <div class="bgi"><span class="avatar-dot">👤<i class="status" id="stdot"></i></span></div>
</div>
css
.bgw{display:flex;gap:40px;align-items:center}
.bgi{position:relative}
.ico{width:44px;height:44px;border-radius:12px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;font-size:19px}
.badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:#e5484d;color:#fff;
  font-size:10px;font-weight:700;display:grid;place-items:center;border:2px solid var(--bg)}
.avatar-dot{position:relative;width:44px;height:44px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;font-size:19px}
.status{position:absolute;bottom:0;right:0;width:11px;height:11px;border-radius:50%;background:#2dd4bf;border:2px solid var(--bg);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.25)}}
js
const bd = document.getElementById('bd');
let n = 1;
setInterval(() => { n = n >= 9 ? 1 : n + 1; bd.textContent = n > 9 ? '9+' : String(n); }, 1000);

Extra information that only exists attached to something else — an icon, an avatar, a tab label — and isn't clickable or removable on its own. A numeric badge needs accompanying text for screen readers, like "3 unread messages" (the bare number "3" carries no meaning alone), while a purely decorative dot should be hidden with aria-hidden="true".

Often confused with a chip, but independence is the difference. A badge always rides on top of something else and is never clicked by itself, while a chip is a standalone element you can click or remove on its own.

Once the count runs past two digits, capping it at something like "99+" is conventional — the badge has little room, and three digits would swallow the icon underneath it.