Notification Badge

Count of unread notifications.

html

<button type="button" class="nb" style="--accent:#E8A020;">
  <span class="nb__icon" aria-hidden="true">&#128276;</span>
  <span class="nb__badge nb__badge--number" aria-hidden="true">3</span>
  <span class="nb__sr">Notifications, 3 unread</span>
</button>
<style>
.nb { position: relative; width: 46px; height: 46px; border-radius: 12px; border: none; background: #FAF7F2; display: grid; place-items: center; cursor: pointer; font: 13px system-ui, sans-serif; }
.nb:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
.nb__icon { font-size: 20px; }
.nb__badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: #241430; font-size: 10px; font-weight: 700; display: grid; place-items: center; box-sizing: border-box; }
.nb__badge--dot { color: transparent; font-size: 0; min-width: 10px; width: 10px; height: 10px; padding: 0; top: 4px; right: 4px; }
.nb__badge--outline { background: #FAF7F2; border: 2px solid var(--accent); color: var(--accent); }
@keyframes nb-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }
@media (prefers-reduced-motion: no-preference) {
  .nb__badge--pulse { animation: nb-pulse .2s ease-in-out infinite; }
}
.nb__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
</style>

tailwind

<button type="button" class="nb-tw relative w-[46px] h-[46px] rounded-xl border-0 bg-[#FAF7F2] grid place-items-center cursor-pointer font-sans text-[13px]" style="--accent:#E8A020">
  <span aria-hidden="true" class="text-xl">&#128276;</span>
  <span aria-hidden="true" class="nb-tw__badge nb-tw__badge--number absolute top-0.5 right-0.5 min-w-[18px] h-[18px] px-1 rounded-full font-bold text-[10px] grid place-items-center box-border" style="background:#E8A020;color:#241430">3</span>
  <span class="sr-only">Notifications, 3 unread</span>
</button>
<style>
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nb-tw__badge--dot { color: transparent; font-size: 0; min-width: 10px; width: 10px; height: 10px; padding: 0; top: 4px; right: 4px; }
.nb-tw__badge--outline { background: #FAF7F2 !important; border: 2px solid #E8A020; color: #E8A020 !important; }
@keyframes nb-tw-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, #E8A020 55%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }
@media (prefers-reduced-motion: no-preference) {
  .nb-tw__badge--pulse { animation: nb-tw-pulse .2s ease-in-out infinite; }
}
</style>

react

export function NotificationBadge({
  label = "Notifications",
  count = 3,
  accent = "#E8A020",
  style = "number",
  pulse = false,
}) {
  const badgeStyle = {
    position: "absolute", top: style === "dot" ? 4 : 2, right: style === "dot" ? 4 : 2,
    minWidth: style === "dot" ? 10 : 18, width: style === "dot" ? 10 : undefined, height: style === "dot" ? 10 : 18,
    padding: style === "dot" ? 0 : "0 4px", borderRadius: 999,
    background: style === "outline" ? "#FAF7F2" : accent,
    border: style === "outline" ? `2px solid ${accent}` : "none",
    color: style === "dot" ? "transparent" : style === "outline" ? accent : "#241430",
    fontSize: style === "dot" ? 0 : 10, fontWeight: 700, display: "grid", placeItems: "center", boxSizing: "border-box",
    animation: pulse ? "nb-pulse 1.4s ease-in-out infinite" : "none",
  };
  return (
    <button type="button" style={{ position: "relative", width: 46, height: 46, borderRadius: 12, border: "none", background: "#FAF7F2", display: "grid", placeItems: "center", cursor: "pointer", font: "13px system-ui, sans-serif" }}>
      <span aria-hidden="true" style={{ fontSize: 20 }}>🔔</span>
      <span aria-hidden="true" style={badgeStyle}>{count}</span>
      <span style={{ position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)", whiteSpace: "nowrap" }}>{label}, {count} unread</span>
    </button>
  );
}