Status Badge

Label representing state.

html

<span class="status-badge status-badge--online">
  <span class="status-badge__dot" aria-hidden="true"></span>
  Online
</span>
<style>
.status-badge { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px system-ui, sans-serif;
  padding: 4px 10px; border-radius: 999px; box-sizing: border-box; border: 1px solid; }
.status-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
@keyframes status-badge-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@media (prefers-reduced-motion: no-preference) {
  .status-badge--pulsing .status-badge__dot { animation: status-badge-pulse .2s ease-in-out infinite; }
}
.status-badge--online { color: #17532F; background: #A8E6C1; border-color: #17532F33; }
.status-badge--away { color: #4A2E00; background: #E8A020; border-color: #4A2E0033; }
.status-badge--busy { color: #FAF7F2; background: #B3261E; border-color: #B3261E; }
.status-badge--offline { color: #24143080; background: #24143014; border-color: #24143022; }
</style>

tailwind

<span class="status-badge-tw status-badge-tw--online inline-flex items-center gap-1.5 font-semibold text-[12.5px] px-2.5 py-1 rounded-full box-border border">
  <span aria-hidden="true" class="status-badge-tw__dot w-[7px] h-[7px] rounded-full flex-shrink-0" style="background:currentColor"></span>
  Online
</span>
<style>
@keyframes status-badge-tw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@media (prefers-reduced-motion: no-preference) {
  .status-badge-tw--pulsing .status-badge-tw__dot { animation: status-badge-tw-pulse .2s ease-in-out infinite; }
}
.status-badge-tw--online { color: #17532F; background: #A8E6C1; border-color: #17532F33; }
.status-badge-tw--away { color: #4A2E00; background: #E8A020; border-color: #4A2E0033; }
.status-badge-tw--busy { color: #FAF7F2; background: #B3261E; border-color: #B3261E; }
.status-badge-tw--offline { color: #24143080; background: #24143014; border-color: #24143022; }
</style>

react

export function StatusBadge({
  label = "Online",
  status = "online",
  showDot = true,
  pulsing = false,
}) {
  const palette = {
    online: { color: "#17532F", background: "#A8E6C1", borderColor: "#17532F33" },
    away: { color: "#4A2E00", background: "#E8A020", borderColor: "#4A2E0033" },
    busy: { color: "#FAF7F2", background: "#B3261E", borderColor: "#B3261E" },
    offline: { color: "#24143080", background: "#24143014", borderColor: "#24143022" },
  }[status] ?? {};
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontWeight: 600, fontSize: 12.5,
      padding: "4px 10px", borderRadius: 999, boxSizing: "border-box", border: "1px solid", ...palette }}>
      {showDot && (
        <span aria-hidden="true" className={pulsing ? "status-badge-react__dot status-badge-react__dot--pulsing" : "status-badge-react__dot"} style={{ width: 7, height: 7, borderRadius: "50%", background: "currentColor",
          flexShrink: 0 }} />
      )}
      {label}
      <style>{`
        @keyframes status-badge-react-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
        @media (prefers-reduced-motion: no-preference) {
          .status-badge-react__dot--pulsing { animation: status-badge-react-pulse .2s ease-in-out infinite; }
        }
      `}</style>
    </span>
  );
}