Global Filter

Filter affecting multiple widgets.

html

<div class="gfilter gfilter--active" style="--c:#F5C2E0;" role="group" aria-label="Filters affecting this dashboard">
  <span class="gfilter__icon" aria-hidden="true">⚑</span>
  <span class="gfilter__chip">Region: EMEA</span>
  <span class="gfilter__chip">Team: Platform</span>
  <span class="gfilter__more">+2 more</span>
</div>
<style>
.gfilter { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 12px system-ui, sans-serif; color: #241430; padding: 6px; border-radius: 10px; border: 1px dashed #24143022; }
.gfilter--active { border-style: solid; border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, #FAF7F2); }
.gfilter__icon { opacity: .6; }
.gfilter__chip { background: #FAF7F2; border: 1px solid #24143022; border-radius: 999px; padding: 3px 10px; }
.gfilter--active .gfilter__chip { border-color: var(--c); }
.gfilter__more { font-weight: 600; opacity: .7; }
</style>

tailwind

<div class="gfilter-tw gfilter-tw--active flex items-center gap-1.5 flex-wrap font-sans text-xs text-[#241430] p-1.5 rounded-[10px] border border-dashed border-[#24143022]" style="--c:#F5C2E0;" role="group" aria-label="Filters affecting this dashboard">
  <span aria-hidden="true" class="opacity-60">⚑</span>
  <span class="gfilter-tw__chip bg-[#FAF7F2] border border-[#24143022] rounded-full px-2.5 py-0.5">Region: EMEA</span>
  <span class="gfilter-tw__chip bg-[#FAF7F2] border border-[#24143022] rounded-full px-2.5 py-0.5">Team: Platform</span>
  <span class="font-semibold opacity-70">+2 more</span>
</div>
<style>
.gfilter-tw--active { border-style: solid !important; border-color: var(--c) !important; background: color-mix(in srgb, var(--c) 14%, #FAF7F2); }
.gfilter-tw--active .gfilter-tw__chip { border-color: var(--c); }
</style>

react

export function GlobalFilter({
  filterA = "Region: EMEA",
  filterB = "Team: Platform",
  extraCount = 2,
  active = true,
  color = "#F5C2E0",
}) {
  const chip = { background: "#FAF7F2", border: `1px solid ${active ? color : "#24143022"}`, borderRadius: 999, padding: "3px 10px" };
  return (
    <div role="group" aria-label="Filters affecting this dashboard" style={{
      display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap", font: "12px system-ui, sans-serif",
      color: "#241430", padding: 6, borderRadius: 10, border: active ? `1px solid ${color}` : "1px dashed #24143022",
      background: active ? `${color}24` : "transparent",
    }}>
      <span aria-hidden="true" style={{ opacity: 0.6 }}>⚑</span>
      <span style={chip}>{filterA}</span>
      <span style={chip}>{filterB}</span>
      {extraCount > 0 && <span style={{ fontWeight: 600, opacity: 0.7 }}>+{extraCount} more</span>}
    </div>
  );
}