Clear Filters

Removes active filters.

html

<div class="clearbar" style="--accent:#BFD9F2;">
  <div class="clearbar__row">
    <span class="chip">Status: Open <button type="button" class="chip__remove" aria-label="Remove filter: Status — Open">×</button></span>
    <span class="chip">Owner: Me <button type="button" class="chip__remove" aria-label="Remove filter: Owner — Me">×</button></span>
  </div>
  
  <p class="clearbar__status" role="status">2 filters applied</p>
  
  
  <button type="button" class="clearbar__clear">Clear all filters</button>
</div>
<style>
.clearbar { font: 14px system-ui, sans-serif; color: #241430; max-width: 340px; }
.clearbar__row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: #24143010; border: 1.5px solid var(--accent); border-radius: 999px; padding: 4px 6px 4px 10px; font-size: 13px; }
.chip__remove { border: none; background: transparent; cursor: pointer; width: 16px; height: 16px; border-radius: 50%; color: #241430; }
.chip__remove:hover, .chip__remove:focus-visible { background: #24143020; outline: none; }
.clearbar__status { margin: 0 0 10px; font-size: 13px; color: #24143099; }
.clearbar__clear { border: 1.5px solid var(--accent); background: #FAF7F2; color: #241430; padding: 8px 14px; border-radius: 6px; cursor: pointer; font: inherit; }
.clearbar__clear:hover:not(:disabled), .clearbar__clear:focus-visible:not(:disabled) { background: var(--accent); outline: none; }
.clearbar__clear:disabled { opacity: .5; cursor: not-allowed; }
</style>

tailwind

<div class="font-sans text-sm text-[#241430] max-w-[340px]">
  <div class="flex flex-wrap gap-2 mb-2.5">
    <span class="inline-flex items-center gap-1.5 bg-[#24143010] border-[1.5px] rounded-full pl-2.5 pr-1.5 py-1 text-[13px] clearbar-chip-tw">Status: Open <button type="button" aria-label="Remove filter: Status — Open" class="border-none bg-transparent cursor-pointer w-4 h-4 rounded-full text-[#241430] hover:bg-[#24143020] focus-visible:outline-none focus-visible:bg-[#24143020]">×</button></span>
    <span class="inline-flex items-center gap-1.5 bg-[#24143010] border-[1.5px] rounded-full pl-2.5 pr-1.5 py-1 text-[13px] clearbar-chip-tw">Owner: Me <button type="button" aria-label="Remove filter: Owner — Me" class="border-none bg-transparent cursor-pointer w-4 h-4 rounded-full text-[#241430] hover:bg-[#24143020] focus-visible:outline-none focus-visible:bg-[#24143020]">×</button></span>
  </div>
  
  <p class="mb-2.5 text-[13px] text-[#24143099]" role="status">2 filters applied</p>
  
  
  <button type="button" class="border-[1.5px] bg-[#FAF7F2] text-[#241430] px-3.5 py-2 rounded-md cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none clearbar-clear-tw">Clear all filters</button>
</div>
<style>
.clearbar-chip-tw { border-color: #BFD9F2; }
.clearbar-clear-tw { border-color: #BFD9F2; }
.clearbar-clear-tw:hover:not(:disabled), .clearbar-clear-tw:focus-visible:not(:disabled) { background: #BFD9F2; }
</style>

react

export function ClearFilters({
  label = "Clear all filters",
  count = 2,
  active = true,
  accent = "#BFD9F2",
}) {
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", maxWidth: 340 }}>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 10 }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 6, background: "#24143010", border: `1.5px solid ${accent}`, borderRadius: 999, padding: "4px 6px 4px 10px", fontSize: 13 }}>
          Status: Open
          <button type="button" aria-label="Remove filter: Status — Open" style={{ border: "none", background: "transparent", cursor: "pointer", width: 16, height: 16, borderRadius: "50%", color: "#241430" }}>×</button>
        </span>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 6, background: "#24143010", border: `1.5px solid ${accent}`, borderRadius: 999, padding: "4px 6px 4px 10px", fontSize: 13 }}>
          Owner: Me
          <button type="button" aria-label="Remove filter: Owner — Me" style={{ border: "none", background: "transparent", cursor: "pointer", width: 16, height: 16, borderRadius: "50%", color: "#241430" }}>×</button>
        </span>
      </div>
      <p role="status" style={{ margin: "0 0 10px", fontSize: 13, color: "#24143099" }}>
        {active ? `${count} filters applied` : "No filters applied"}
      </p>
      <button type="button" disabled={!active} style={{
        border: `1.5px solid ${accent}`, background: "#FAF7F2", color: "#241430", padding: "8px 14px",
        borderRadius: 6, cursor: active ? "pointer" : "not-allowed", opacity: active ? 1 : 0.5,
      }}>{label}</button>
    </div>
  );
}