FilterBar

A combined search and filter toolbar for list and table views. Includes a search input, active filter chips with removal, a filter count badge, and support for custom filter controls and action buttons.

Import

import { FilterBar } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

<FilterBar
  searchValue={search}
  onSearchChange={setSearch}
  searchPlaceholder="Search lessons..."
  activeFilters={[
    { key: 'status', label: 'Status', value: 'Active' },
    { key: 'level', label: 'Level', value: 'Beginner' },
  ]}
  onRemoveFilter={(key) => removeFilter(key)}
  onClearAll={() => clearAllFilters()}
  actions={<Button variant="outline" size="sm">Add Filter</Button>}
/>

Props

Prop	Type	Default	Description
`searchValue`	string	`''`	Current search input value.
`onSearchChange`	(value: string) => void	-	Callback when the search input value changes.
`searchPlaceholder`	string	`'Search...'`	Placeholder text for the search input.
`activeFilters`	FilterOption[]	`[]`	Array of currently active filters displayed as removable chips.
`onRemoveFilter`	(key: string) => void	-	Callback when a filter chip is removed.
`onClearAll`	() => void	-	Callback to clear all active filters. Only shown when more than one filter is active.
`actions`	ReactNode	-	Additional action elements displayed next to the search input.
`children`	ReactNode	-	Additional filter controls rendered in the toolbar.
`showFilterCount`	boolean	`true`	Whether to show a badge with the active filter count.
`className`	string	-	Additional CSS classes for the wrapper.

FilterOption

Property	Type	Description
`key`	`string`	Unique key for the filter.
`label`	`string`	Display label for the filter category.
`value`	`string`	Display value of the active filter.