Toolbar
The bar above a list or table: find and filter on the left, view and actions on the right, with a filter bar that opens under it.
Master
Click the search and type Sales for quick navigation. Click Filters to open the filter bar; pick a Status or Period, then click its name to switch it off and on.
Usage
Put one Toolbar right above a list or table, under the PageHeader. It is one component. Left: a Filters button (when filters are passed), carrying a kit Count of how many filters are on and a search field, which with searchGroups opens a kit GlobalSearch dropdown of quick-navigation results; then, after a divider, the view picker and refresh. Right: a More menu and the actions, kit Buttons size sm with at most one strong brand Button, last. Filters toggles the filter bar under it: the filter chips (kit Dropdown trigger filter), then Reset and Apply filters, and an optional help icon at the end. Every part is optional; leave out what the list does not need. buttons subtle gives the buttons on the bar the bar's own grey instead of white paper, for a quieter bar; the search field keeps its white box either way. On a page that scrolls, the Toolbar stays at the top under the compact PageHeader bar, so what filters and acts on the list is in reach the whole way down; the patterns pin it, not the Toolbar itself. See contracts/toolbar.json for the full contract. Under 1024px the toolbar keeps to one line: the filters, the search (it narrows first when space is short), the view and refresh, with the actions at the end. Under 640px, the kit's mobile break, the search takes a line of its own and everything else shares the next. When the actions do not fit on that line they fold into one Actions menu that lists them, then More's items after a divider. It is either the whole row of buttons or the one menu, never a wrapped row. If even the Actions button does not fit, it shows as an icon-only more button, still named Actions.
Do's
- Right above a list or table that people search, filter, switch views on or act on.
- A page with several filters: they live in the filter bar, not across the page.
Don'ts
- Do not invent a FilterBar, ListToolbar or a local row of controls above a table.
- Do not open the filter bar when the screen loads. It starts closed; people open it with Filters, and filterCount still says the list is narrowed.
- Do not put more than one strong brand Button in actions.
- Do not put page titles or breadcrumbs in it. Those are the PageHeader.
- Do not use Tabs or ButtonGroup for the view picker. Pass views.
- Do not use raw hex.
<Toolbar
filters={filterChips}
onReset={resetFilters}
onApply={applyFilters}
filterHelp="Filters narrow the list. Switch a filter off to keep it without applying it."
onSearchChange={setQuery}
searchGroups={quickLinks}
onSearchViewAll={searchAll}
views={views}
onRefresh={reload}
moreActions={moreActions}
actions={actions}
buttons="raised"
/>