Filter Bar

A horizontal panel showing active filters as pills. Use LabeledPill for the standard icon + label + operator + value shape, or compose raw PillSegments for anything non-standard. Pair with a dropdown trigger for adding new filters and a clear button to reset all.

Single pill

One pill per active filter category.

Start date
is
Last 7 days
Multiple pills

Multiple pills wrap across rows as needed. Values join with commas; collapse to 'N selected' past a threshold.

Start date
is
Last 7 days
Duration
is
Less than 5 min, 5 to 10 min
Events count
is
3 selected
Custom operator

The operator between label and value defaults to 'is' but can be overridden per pill.

User
is not
Aria Lovelace
Composable pill

For non-standard shapes, compose raw PillSegments inside a Pill. Each segment renders as a divider-separated cell.

Start date
between
Apr 8
and
Apr 15
With add-filter dropdown

The Plus button is a styled IconButton that consumers wrap in a DropdownMenu trigger. Hidden on mobile viewports.

Start date
is
Today
Interactive

Bar unmounts when no filters are active — the consumer returns null.

Start date
is
Today
Duration
is
Less than 5 min