revido kit
Start building
← All components
layout / stable

ViewToolbar

The single row under a list page's title bar: search, Filter and Display together on the left; optional trailing extras on the right.

LIVE PREVIEW
Loading preview…

When to use

  • Every list or board page — the view switch then sits in the same place everywhere.
  • Search, Filter and one DisplayOptions (layout, grouping, ordering) as one cluster on the left, with active chips on their own line below.
  • A toolbar-level extra such as Export goes in `actions` and stays on the right edge.

Consider an alternative

  • Page actions like “New deal” — they belong in the top bar.
  • Editor formatting rows or icon toolbars that need arrow-key navigation — use Toolbar.
  • Repeating the item count — that's the count badge next to the title.

Import

import { ViewToolbar } from '@revido-llc/kit';

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.

aria-label (required)string—Names the toolbar for assistive tech, e.g. "Deal filters".
actionsReactNode—Trailing extras on the same line, pushed to the right edge: toolbar-level actions that are not about the view itself (Export, Refresh, "Log time"). Never wraps. Omit it on most pages — page actions belong in `PageHeader`.
childrenReactNode—Start: search and the Filter button.
classNamestring—
displayReactNode—The view control: one `DisplayOptions` (layout, grouping, ordering, properties, options). Sits right after the Filter button — Filter and Display are one cluster on the left — and never wraps apart from it.
filtersReactNode—Active filters (`FilterChips`): their own line under the toolbar, across its whole width. Renders nothing when empty.

Examples

List page toolbar

Resize the window: active filter chips get their own full-width line; Filter and Display stay side by side on the left (Display is icon only below sm).

<ViewToolbar
  aria-label="Deal filters"
  filters={<FilterChips fields={fields} value={filters} onChange={setFilters} />}
  display={<DisplayOptions layouts={layouts} orderings={orderings} value={display} defaultValue={defaults} onChange={setDisplay} />}
>
  <SearchField aria-label="Search deals" value={query} onChange={setQuery} className="min-w-32 flex-1 basis-48 sm:max-w-sm" />
  <FilterButton fields={fields} value={filters} onChange={setFilters} />
</ViewToolbar>

Without filters applied

<ViewToolbar aria-label="Task filters" display={<DisplayOptions layouts={layouts} value={display} defaultValue={defaults} onChange={setDisplay} />}>
  <SearchField aria-label="Search tasks" value={query} onChange={setQuery} />
  <FilterButton fields={fields} value={filters} onChange={setFilters} />
</ViewToolbar>

With a trailing extra

`actions` is for toolbar-level extras (Export, Refresh) — they stay on the right while Filter and Display stay together on the left.

<ViewToolbar
  aria-label="Task filters"
  display={<DisplayOptions layouts={layouts} value={display} defaultValue={defaults} onChange={setDisplay} />}
  actions={<Button size="sm" variant="ghost"><Download /> Export</Button>}
>
  <SearchField aria-label="Search tasks" value={query} onChange={setQuery} />
  <FilterButton fields={fields} value={filters} onChange={setFilters} />
</ViewToolbar>

Literal anatomy

Static component anatomy; bind events in the consuming app.

<ViewToolbar aria-label="Draft filters"><SearchField aria-label="Search drafts" /></ViewToolbar>

Related components