Filter Bar
A row of toggle-able filter chips for category-based filtering, with active state highlighting in Zostel orange.
Preview
Usage
tsx
import { FilterBar } from "zostel-ui";
const [active, setActive] = useState(["All"]);
<FilterBar
filters={["All", "Workation", "Adventure", "Weekend", "Mountain", "Beach"]}
active={active}
onChange={setActive}
variant="chip"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
filters | string[] | FilterItem[] | — | Array of filter labels or objects with label, icon, and count |
active | string[] | — | Currently active filter values |
onChange | (active: string[]) => void | — | Callback when selection changes |
variant | "chip" | "icon" | "count" | "chip" | Visual variant for the filter chips |
multiSelect | boolean | true | Whether multiple filters can be active |
filtersType:
string[] | FilterItem[]Default: —
Array of filter labels or objects with label, icon, and count
activeType:
string[]Default: —
Currently active filter values
onChangeType:
(active: string[]) => voidDefault: —
Callback when selection changes
variantType:
"chip" | "icon" | "count"Default: "chip"
Visual variant for the filter chips
multiSelectType:
booleanDefault: true
Whether multiple filters can be active