Filter Bar

The toolbar above a table or list: a search field, a row of filter controls, a right-aligned actions cluster and a readout of what is applied. The bar owns only the wrapping rhythm — everything in it is a slot.

tsx

1import {
2  FilterBar,
3  FilterBarSearch,
4  FilterBarActions,
5  FilterBarActiveFilters,
6} from "@pestoui/core"

Search, actions and applied filters

FilterBarActiveFilters renders nothing when its list is empty, so it can sit in the bar unconditionally. Drop a Filter menu between the search and the actions for the facet controls.

Filters

Status: Active
Owner: Content team

Props

Prop	Type	Default	Description
sticky	boolean	false	On FilterBar. Pins the bar to the top of its scroll container on a blurred background.
border	boolean	false	On FilterBar. Hairline rule under the bar.
placeholder / aria-label	string	"Search"	On FilterBarSearch. It is an input, so value, onChange and the rest apply.
containerClassName	string	—	On FilterBarSearch. On the wrapper that holds the glyph and the input — set the field's width here.
filters	FilterBarActiveFilter[]	—	On FilterBarActiveFilters. Required. Each is { id, field?, value }, shown as “Status: Active”.
onRemove	(id: string) => void	—	On FilterBarActiveFilters. Makes each chip dismissible and hands back its id.
onClearAll	() => void	—	On FilterBarActiveFilters. Renders the clear button.
label / clearLabel	ReactNode	"Filters" / "Clear all"	On FilterBarActiveFilters. The caption before the chips and the clear button's text.

PreviousFilter Next Goal Meter

Pesto UI · 117 documented components