# Filter bar

Filter bar: a free component, built on your design tokens, to use above a table people search, filter and sort. The row above a table: search, filter chips with one applied and removable, add a filter, a sort button and the number of results, wrapping cleanly on narrow screens.

Prompt: Add the OpenDesigner component filter-bar to this project: https://opendesigner.dev/library/r/filter-bar.html. Keep its markup and states; map its --ds-* variables to my tokens.

States: hover, focus, filter applied, filter empty, removed.

Accessibility: The bar is a labelled search landmark; every chip and the sort control are buttons that say they open a popup, the remove button names the filter it clears, and the result count is a polite live region.

File: https://opendesigner.dev/library/r/filter-bar.html