import { FilterBar } from "@danagraph/design-system/finance"Loading demo…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
chipsreq | FilterChip[] | — | Filter chips ({ id, label, active? }) |
onTogglereq | (chipId: string, active: boolean) => void | — | Called when a chip is toggled |
leading | ReactNode | — | Optional leading content (e.g. search input) |
trailing | ReactNode | — | Optional trailing content (e.g. export button) |
multiSelect | boolean | true | Allow multiple chips active simultaneously |
density | "default" | "compact" | — | Display density |
chipsrequiredType
FilterChip[]Default —Filter chips ({ id, label, active? })
onTogglerequiredType
(chipId: string, active: boolean) => voidDefault —Called when a chip is toggled
leadingType
ReactNodeDefault —Optional leading content (e.g. search input)
trailingType
ReactNodeDefault —Optional trailing content (e.g. export button)
multiSelectType
booleanDefault trueAllow multiple chips active simultaneously
densityType
"default" | "compact"Default —Display density
MobileTouch Target
Each filter chip/button must be ≥44px. On mobile, collapse filter bar into a 'Filters' button that opens a bottom sheet with all filter options.
Design Rationale
This component was designed to express:
Explore Related
Was this helpful?