Toolbar

A filter bar above a list. It owns spacing, wrapping and the right end; what filters, the caller supplies.

When to use it

A search box, selects or toggles narrowing what is visible sit above a table or list. The block order of a list screen is: filter bar, bulk-action bar, table, pager.
The screen's primary action ("Add") belongs to the right of the filters — that is the end slot, so the last filter cannot steal the right end.

When not to use it

The bulk-action bar above selected rows — the table draws that one itself, because it hangs off the table's selection.
A form with a submit. A filter bar is a group of controls with immediate effect; anything with a "Save" button and validation belongs in a form.

Properties

children: ReactNode — The filters, left to right: search, selects, toggles — already translated.
end: ReactNode — The right end of the bar — typically the screen's primary action.
className: string — Pass-through class on the wrapper (rare — the primitive owns spacing).
testId: string — data-testid of the bar.