Dashboard Filter

Filter affecting dashboard content.

html

<div class="dfilter dfilter--active" style="--c:#BFD9F2;">
  <span class="dfilter__label">Region:</span>
  <span class="dfilter__value">EMEA</span>
  <button type="button" class="dfilter__clear" aria-label="Clear Region filter">×</button>
  <span class="dfilter__count" aria-label="3 filters active">3</span>
</div>
<style>
.dfilter { display: inline-flex; align-items: center; gap: 6px; font: 13px/1.4 system-ui, sans-serif; color: #241430; border: 1.5px solid #24143022; border-radius: 999px; padding: 5px 6px 5px 12px; background: #FAF7F2; }
.dfilter--active { border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, #FAF7F2); }
.dfilter__label { opacity: .7; }
.dfilter__value { font-weight: 600; }
.dfilter__clear { border: none; background: var(--c); color: #241430; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; line-height: 1; font-size: 13px; }
.dfilter__clear:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.dfilter__count { font-size: 11px; font-weight: 700; background: #241430; color: #FAF7F2; border-radius: 999px; padding: 1px 6px; }
</style>

tailwind

<div class="dfilter-tw dfilter-tw--active inline-flex items-center gap-1.5 font-sans text-[13px] text-[#241430] border-[1.5px] border-[#24143022] rounded-full py-1.5 pl-3 pr-1.5 bg-[#FAF7F2]" style="--c:#BFD9F2;">
  <span class="opacity-70">Region:</span>
  <span class="font-semibold">EMEA</span>
  <button type="button" class="border-none rounded-full w-[18px] h-[18px] text-[13px] leading-none cursor-pointer" style="background:var(--c);" aria-label="Clear Region filter">×</button>
  <span class="text-[11px] font-bold bg-[#241430] text-[#FAF7F2] rounded-full px-1.5" aria-label="3 filters active">3</span>
</div>
<style>
.dfilter-tw--active { border-color: var(--c) !important; background: color-mix(in srgb, var(--c) 18%, #FAF7F2) !important; }
</style>

react

export function DashboardFilter({
  label = "Region",
  value = "EMEA",
  active = true,
  count = 3,
  color = "#BFD9F2",
}) {
  return (
    <div style={{
      display: "inline-flex", alignItems: "center", gap: 6, font: "13px/1.4 system-ui, sans-serif",
      color: "#241430", border: `1.5px solid ${active ? color : "#24143022"}`, borderRadius: 999,
      padding: "5px 6px 5px 12px", background: active ? `${color}2e` : "#FAF7F2",
    }}>
      <span style={{ opacity: 0.7 }}>{label}:</span>
      <span style={{ fontWeight: 600 }}>{value}</span>
      {active && (
        <button type="button" aria-label={`Clear ${label} filter`} style={{ border: "none", background: color, color: "#241430", width: 18, height: 18, borderRadius: "50%", cursor: "pointer", lineHeight: 1, fontSize: 13 }}>×</button>
      )}
      <span aria-label={`${count} filters active`} style={{ fontSize: 11, fontWeight: 700, background: "#241430", color: "#FAF7F2", borderRadius: 999, padding: "1px 6px" }}>{count}</span>
    </div>
  );
}