## 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.

Filters:

## 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.