Unread Indicator

Shows unread content.

html

<div class="unread unread--count">
  <span class="unread__mark" style="background:#E8A020;color:#E8A020;" aria-hidden="true">5</span>
  <span class="unread__label unread__label--bold">Inbox<span class="sr-only">, 5 unread</span></span>
</div>
<style>
.unread { display: inline-flex; align-items: center; gap: 8px; font: 14px system-ui, sans-serif; color: #241430; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.unread__mark { display: inline-grid; place-items: center; border-radius: 50%; }
.unread--dot .unread__mark { width: 8px; height: 8px; font-size: 0; }
.unread--count .unread__mark { min-width: 20px; height: 20px; padding: 0 5px; color: #241430 !important; font: 700 11px system-ui, sans-serif; }
.unread--ring .unread__mark { width: 14px; height: 14px; background: transparent !important; border: 2px solid; font-size: 0; }
.unread__label--bold { font-weight: 700; }
</style>

tailwind

<div class="unread-tw unread-tw--count inline-flex items-center gap-2 font-sans text-sm text-[#241430]">
  <span aria-hidden="true" class="unread-tw__mark inline-grid place-items-center rounded-full" style="background:#E8A020;color:#E8A020">5</span>
  <span class="font-bold">Inbox<span class="sr-only">, 5 unread</span></span>
</div>
<style>
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.unread-tw--dot .unread-tw__mark { width: 8px; height: 8px; font-size: 0; }
.unread-tw--count .unread-tw__mark { min-width: 20px; height: 20px; padding: 0 5px; color: #241430 !important; font-size: 11px; font-weight: 700; }
.unread-tw--ring .unread-tw__mark { width: 14px; height: 14px; background: transparent !important; border: 2px solid currentColor; font-size: 0; }
</style>

react

export function UnreadIndicator({
  label = "Inbox",
  count = 5,
  style = "count",
  accent = "#E8A020",
  bold = true,
}) {
  const markStyle = {
    dot: { width: 8, height: 8, background: accent, fontSize: 0 },
    count: { minWidth: 20, height: 20, padding: "0 5px", background: accent, color: "#241430", fontSize: 11, fontWeight: 700 },
    ring: { width: 14, height: 14, background: "transparent", border: `2px solid ${accent}`, fontSize: 0 },
  }[style];
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430" }}>
      <span aria-hidden="true" style={{ display: "inline-grid", placeItems: "center", borderRadius: "50%", ...markStyle }}>{count}</span>
      <span style={{ fontWeight: bold ? 700 : 400 }}>
        {label}
        <span style={{ position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0,0,0,0)" }}>, {count} unread</span>
      </span>
    </div>
  );
}