Chip

Compact interactive or informational label.

html

<span class="chip chip--tonal" style="--c:#BFD9F2;">
  React
  <button type="button" class="chip__remove" aria-label="Remove React">×</button>
</span>
<style>
.chip { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1 system-ui, sans-serif;
  padding: 6px 10px; border-radius: 999px; border: 1.5px solid var(--c); box-sizing: border-box; color: #241430; }
.chip--filled { background: var(--c); }
.chip--outline { background: transparent; }
.chip--tonal { background: color-mix(in srgb, var(--c) 30%, #FAF7F2); border-color: transparent; }
.chip--selected { box-shadow: 0 0 0 2px #241430; }
.chip__remove { border: none; background: transparent; color: inherit; font-size: 13px; line-height: 1; cursor: pointer; padding: 0; opacity: .7; }
.chip__remove:hover { opacity: 1; }
.chip__remove:focus-visible { outline: 2px solid #241430; outline-offset: 2px; opacity: 1; }
</style>

tailwind

<span class="chip-tw chip-tw--tonal inline-flex items-center gap-1.5 font-medium text-[13px] leading-none px-2.5 py-1.5 rounded-full border-[1.5px] box-border text-[#241430]" style="--c:#BFD9F2;">
  React
  <button type="button" aria-label="Remove React" class="border-0 bg-transparent text-[13px] leading-none cursor-pointer p-0 opacity-70 hover:opacity-100">×</button>
</span>
<style>
.chip-tw { border-color: var(--c); }
.chip-tw--filled { background: var(--c); }
.chip-tw--outline { background: transparent; }
.chip-tw--tonal { background: color-mix(in srgb, var(--c) 30%, #FAF7F2); border-color: transparent; }
.chip-tw--selected { box-shadow: 0 0 0 2px #241430; }
</style>

react

export function Chip({
  label = "React",
  variant = "tonal",
  color = "#BFD9F2",
  selected = false,
  removable = true,
}) {
  const palette = {
    filled: { background: color, borderColor: color },
    outline: { background: "transparent", borderColor: color },
    tonal: { background: `color-mix(in srgb, ${color} 30%, #FAF7F2)`, borderColor: "transparent" },
  }[variant] ?? {};
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontWeight: 500, fontSize: 13,
      lineHeight: 1, padding: "6px 10px", borderRadius: 999, border: "1.5px solid", boxSizing: "border-box",
      color: "#241430", boxShadow: selected ? "0 0 0 2px #241430" : "none", ...palette }}>
      {label}
      {removable && (
        <button type="button" aria-label={`Remove ${label}`} style={{ border: "none", background: "transparent",
          color: "inherit", fontSize: 13, lineHeight: 1, cursor: "pointer", padding: 0, opacity: 0.7 }}>×</button>
      )}
    </span>
  );
}