Filter.Trigger

<Filter.Trigger
	summary={search}
	activeCount={2}
	onClick={() => setOpen(true)}
/>;

API

Prop	Type	Default
`activeCount`	`number`	required	Number of active filters, shown as a badge. Keeps a filtered list from reading as a short one; pass `countActiveFilters(values)`.
`labels`	`Partial<FilterLabels>`	—	Overrides for the strings this button shows, merged over the surrounding filter root's (English defaults at the outermost level).
`summary`	`string`	—	Current search text, or the placeholder when nothing is searched yet.
`exit`	`Exit`	—	Inside a `<Presence>`: plays this child's way out before it unmounts.

Plus every <button> prop. Source: filter/components/filter-trigger.tsx.

activeCount is the prop that matters: pass countActiveFilters(values) and a filtered list stops looking like a short one. It is a plain <button>, so onClick and the rest are yours — Filter.Root wires it to Filter.Panel for you.

Filter.SearchInput and Filter.Button

The pair a live bar shows instead: a real search input that reports every keystroke, and a "Filters" button carrying the active count.

<Filter.SearchInput value={search} onValueChange={setSearch} />
<Filter.Button activeCount={countActiveFilters(values)} onClick={() => setOpen(true)} />

Prop	Type	Default
`onValueChange`	`(value: string) => void`	required	Called on every keystroke, and with `""` from the clear button. Debounce your query.
`value`	`string`	required	The search text. Controlled.
`labels`	`Partial<FilterLabels>`	—	Overrides for the strings this input shows, merged over the surrounding filter root's (English defaults at the outermost level).
`placeholder`	`string`	—	Overrides `labels.searchPlaceholder` for this one list ("Search by email…").
`exit`	`Exit`	—	Inside a `<Presence>`: plays this child's way out before it unmounts.

Plus the DOM props of the element it renders. Source: filter/components/filter-search-input.tsx.

Prop	Type	Default
`activeCount`	`number`	required	Number of active filters, shown as a badge so a filtered list never reads as a short one; pass `countActiveFilters(values)`.
`labels`	`Partial<FilterLabels>`	—	Overrides for the strings this button shows, merged over the surrounding filter root's (English defaults at the outermost level).
`loading`	`boolean`	—	Show a leading spinner and mark the button `aria-busy`, disabling interaction while an async action is in flight (e.g. a form submit).
`shape`	`"default" \| "pill"`	—	`pill` forces a fully rounded button; `default` follows the theme's `--radius`, so it changes with the brand.
`size`	`"default"` \| `"icon"` \| `"icon-lg"` \| `"icon-sm"` \| `"icon-xs"` \| `"lg"` \| `"sm"` \| `"xs"`	—	Height and horizontal padding. The `icon-*` set is square, for a button whose entire content is one icon — give those an `aria-label`.
`variant`	`"brand"` \| `"default"` \| `"destructive"` \| `"ghost"` \| `"highlight"` \| `"link"` \| `"outline"` \| `"primary"` \| `"secondary"`	`"outline"`	Weight of the action. `default` is the one thing the page exists for, at most one per view; `secondary` an equal-weight alternative; `outline` for toolbars and anything that repeats in a row; `ghost` inside dense surfaces; `destructive` for what cannot be undone; `link` for an action that reads as navigation.
`exit`	`Exit`	—	Inside a `<Presence>`: plays this child's way out before it unmounts.
`className`	`string` \| `((state: ButtonState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`focusableWhenDisabled`	`boolean`	—	Whether the button should be focusable when disabled.
`nativeButton`	`boolean`	—	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
`render`	`ComponentRenderFn<HTMLProps, ButtonState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`style`	`CSSProperties` \| `((state: ButtonState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: filter/components/filter-button.tsx.

Pass aria-pressed to Filter.Button when it toggles an editor that stays open, such as Filter.Dock, so it reads as held.