Pill

Rounded compact label/control.

html

<span class="pill pill--solid" style="--c:#A8E6C1;font-size:13px;">12 online</span>
<style>
.pill { display: inline-block; font: 600 1em system-ui, sans-serif; padding: .4em 1em; border-radius: 999px;
  border: 1.5px solid var(--c); box-sizing: border-box; line-height: 1; }
.pill--solid { background: var(--c); color: #241430; }
.pill--soft { background: color-mix(in srgb, var(--c) 25%, #FAF7F2); color: #241430; border-color: transparent; }
.pill--outline { background: transparent; color: var(--c); }
</style>

tailwind

<span class="pill-tw pill-tw--solid inline-block font-semibold leading-none px-4 py-1.5 rounded-full border-[1.5px] box-border" style="--c:#A8E6C1;font-size:13px;">12 online</span>
<style>
.pill-tw { border-color: var(--c); }
.pill-tw--solid { background: var(--c); color: #241430; }
.pill-tw--soft { background: color-mix(in srgb, var(--c) 25%, #FAF7F2); color: #241430; border-color: transparent; }
.pill-tw--outline { background: transparent; color: var(--c); }
</style>

react

export function Pill({
  label = "12 online",
  tone = "solid",
  color = "#A8E6C1",
  size = 13,
}) {
  const palette = {
    solid: { background: color, color: "#241430", borderColor: color },
    soft: { background: `color-mix(in srgb, ${color} 25%, #FAF7F2)`, color: "#241430", borderColor: "transparent" },
    outline: { background: "transparent", color, borderColor: color },
  }[tone] ?? {};
  return (
    <span style={{ display: "inline-block", fontWeight: 600, fontSize: size, lineHeight: 1, padding: "0.4em 1em",
      borderRadius: 999, border: "1.5px solid", boxSizing: "border-box", ...palette }}>{label}</span>
  );
}