Badge

Compact status/count indicator.

html

<span class="badge badge--solid badge--pill" style="--c:#E8A020;font-size:12px;">
  <span class="badge__dot"></span>
  New
</span>
<style>
.badge { display: inline-flex; align-items: center; gap: 6px; font: 600 1em system-ui, sans-serif;
  padding: .35em .75em; border: 1.5px solid var(--c); line-height: 1; box-sizing: border-box; }
.badge--pill { border-radius: 999px; }
.badge--rounded { border-radius: 6px; }
.badge--square { border-radius: 0; }
.badge--solid { background: var(--c); color: #FAF7F2; }
.badge--outline { background: transparent; color: var(--c); }
.badge--soft { background: color-mix(in srgb, var(--c) 20%, #FAF7F2); color: var(--c); border-color: transparent; }
.badge__dot { width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
</style>

tailwind

<span class="badge-tw badge-tw--solid badge-tw--pill inline-flex items-center gap-1.5 font-semibold leading-none px-3 py-1.5 border-[1.5px] box-border" style="--c:#E8A020;font-size:12px;">
  <span class="rounded-full" style="width:.5em;height:.5em;background:currentColor"></span>
  New
</span>
<style>
.badge-tw { border-color: var(--c); }
.badge-tw--pill { border-radius: 999px; }
.badge-tw--rounded { border-radius: 6px; }
.badge-tw--square { border-radius: 0; }
.badge-tw--solid { background: var(--c); color: #FAF7F2; }
.badge-tw--outline { background: transparent; color: var(--c); }
.badge-tw--soft { background: color-mix(in srgb, var(--c) 20%, #FAF7F2); color: var(--c); border-color: transparent; }
</style>

react

export function Badge({
  label = "New",
  variant = "solid",
  shape = "pill",
  color = "#E8A020",
  size = 12,
  dot = true,
}) {
  const radius = { pill: 999, rounded: 6, square: 0 }[shape] ?? 999;
  const palette = {
    solid: { background: color, color: "#FAF7F2", borderColor: color },
    outline: { background: "transparent", color, borderColor: color },
    soft: { background: `${color}33`, color, borderColor: "transparent" },
  }[variant] ?? {};
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontWeight: 600,
      fontSize: size, lineHeight: 1, padding: "0.35em 0.75em", borderRadius: radius,
      border: "1.5px solid", boxSizing: "border-box", ...palette }}>
      {dot && <span style={{ width: "0.5em", height: "0.5em", borderRadius: "50%", background: "currentColor" }} />}
      {label}
    </span>
  );
}