Components
FilterPopover
A labelled filter trigger button with an active-count badge that opens a popover of controls.
FilterPopover is the reusable shell behind the individual filter controls. It
renders a secondary trigger button with a label, leading icon, and an
activeCount badge, and opens a popover holding whatever controls you pass as
children. Optional onApply/onClear callbacks render Apply and Clear
buttons in a footer (Apply also closes the popover). FacetedFilter,
RangeFilter, and DateRangeFilter are all built on it; use it directly for a
custom filter.
Example
Preview
import { FilterPopover, CheckboxGroup } from '@officina/ui';
<FilterPopover label="Status" activeCount={selected.length} onClear={() => setSelected([])}>
<CheckboxGroup value={selected} onChange={setSelected} options={statusOptions} />
</FilterPopover>;API
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | ReactNode | — | Filter controls rendered inside the popover. |
| label* | string | — | Trigger button label. |
| activeCount | number | 0 | Number of active filters; shown as a badge on the trigger. |
| applyLabel | string | Apply | Label for the apply button. |
| clearLabel | string | Clear | Label for the clear button. |
| icon | ReactNode | — | Leading icon on the trigger. |
| onApply | () => void | — | Called when the apply button is pressed. |
| onClear | () => void | — | Called when the clear button is pressed. |