Filter Chip

Compact active-filter representation.

html

<span class="chip chip--solid" style="--accent:#A8E6C1;">
  <span class="chip__text">Status: Open</span>
  <button type="button" class="chip__remove" aria-label="Remove filter: Status — Open">
    <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><path d="M1 1L9 9M9 1L1 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
  </button>
</span>
<style>
.chip { display: inline-flex; align-items: center; gap: 6px; font: 14px system-ui, sans-serif; color: #241430; padding: 6px 8px 6px 12px; border-radius: 999px; }
.chip--solid { background: var(--accent); }
.chip--outline { background: #FAF7F2; border: 1.5px solid var(--accent); }
.chip__remove { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: none; background: transparent; color: #241430; cursor: pointer; padding: 0; }
.chip__remove:hover, .chip__remove:focus-visible { background: #24143020; outline: none; }
</style>

tailwind

<span class="inline-flex items-center gap-1.5 font-sans text-sm text-[#241430] pl-3 pr-1.5 py-1.5 rounded-full chip-tw chip-tw--solid" style="--accent:#A8E6C1;">
  <span>Status: Open</span>
  <button type="button" aria-label="Remove filter: Status — Open" class="inline-flex items-center justify-center w-[18px] h-[18px] rounded-full border-none bg-transparent text-[#241430] cursor-pointer p-0 hover:bg-[#24143020] focus-visible:outline-none focus-visible:bg-[#24143020]">
    <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><path d="M1 1L9 9M9 1L1 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
  </button>
</span>
<style>
.chip-tw--solid { background: var(--accent); }
.chip-tw--outline { background: #FAF7F2; border: 1.5px solid var(--accent); }
</style>

react

export function FilterChip({
  facet = "Status",
  value = "Open",
  variant = "solid",
  accent = "#A8E6C1",
}) {
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "system-ui, sans-serif", fontSize: 14,
      color: "#241430", padding: "6px 8px 6px 12px", borderRadius: 999,
      background: variant === "solid" ? accent : "#FAF7F2",
      border: variant === "outline" ? `1.5px solid ${accent}` : "none",
    }}>
      <span>{facet}: {value}</span>
      <button type="button" aria-label={`Remove filter: ${facet} — ${value}`} style={{
        display: "inline-flex", alignItems: "center", justifyContent: "center", width: 18, height: 18,
        borderRadius: "50%", border: "none", background: "transparent", color: "#241430", cursor: "pointer", padding: 0,
      }}>
        <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><path d="M1 1L9 9M9 1L1 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>
      </button>
    </span>
  );
}