Filter Bar
tag-ui popover-ui action-list-ui
Row of active filters above a table or list. Each filter is a removable chip; a trailing "Add filter" button opens a popover of available facets. Distinct from full-text search, which stays in the toolbar.
When to use
Use a filter bar when users apply multiple faceted filters to the same view
— status + owner + date range is the typical shape. A single dropdown is enough
for one facet; a drawer is better for 5+ complex facets. The bar is the
middle ground.
Active filters + Add filter
Chips show each active filter. The trailing button opens a popover of available facets.
Filter bar + table
The common composition: filters sit above the table inside one card surface so they read as modifying the same data.
Saved views
Named combinations of filters. Segmented control replaces the active-filter chips while a view is applied.
Anatomy
<row-ui gap="2" align="center" wrap>
<text-ui color="subtle" weight="semibold">Filters:</text-ui>
<!-- one removable chip per active filter -->
<tag-ui text="Status: Active" removable></tag-ui>
<tag-ui text="Owner: Alex Chen" removable></tag-ui>
<!-- popover-anchored menu of facets -->
<button-ui text="+ Add filter" variant="ghost"
popovertarget="filter-menu"></button-ui>
<span data-spacer></span>
<button-ui text="Clear all" variant="ghost"></button-ui>
</row-ui>
<popover-ui id="filter-menu" anchor="previous">
<action-list-ui>...facets...</action-list-ui>
</popover-ui>
Rules
- One chip per active filter. If a filter has multiple values (e.g., Status in [Active, Draft]), collapse to
"Status: 2" with the chip showing the count.
- Filters modify the dataset. Search modifies the match within the dataset. Keep them visually distinct — filters left, search right.
- Clear-all only appears when ≥1 filter is active.
- Saved views and free-form chip filters are mutually exclusive. Pick one per surface — mixing both confuses "what state am I in?".
- When filters come from a drawer instead (5+ facets, complex forms), use a
button-ui icon="funnel" that opens a filter drawer. The chip bar below still shows what's active.