actions / stable

Toolbar

A row of controls that is one tab stop with arrow-key navigation — filter and display bars.

LIVE PREVIEW

Loading preview…

When to use

Filter / sort / display bars above lists.
Formatting rows in editors.
Timeline zoom and overlay controls.

Consider an alternative

Page actions in the top bar — plain buttons.
Switching views alone — use SegmentedControl.
As the filter UI itself — filtering (field → values → active chips, Linear-style) is the FilterBuilder pattern; Toolbar only hosts its trigger.

Import

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

Keyboard interaction

Tab / Shift+Tab — enter or leave the whole toolbar; re-entry restores the last focused control.
Horizontal: ArrowLeft / ArrowRight move between controls; ArrowDown opens a Select or Menu trigger.
Vertical: ArrowUp / ArrowDown move between controls; Enter / Space open triggers.
Enter / Space — activate the focused button or segmented choice; Escape closes an open overlay.

Props

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


className	string	—
children	ChildrenOrFunction<ToolbarRenderProps>	—	The children of the component. A function may be provided to alter the children based on component state.
orientation	Orientation	'horizontal'	The orientation of the entire toolbar.
render	DOMRenderFunction<"div", ToolbarRenderProps>	—	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.

Related exports

ToolbarSeparator

Examples

View controls

Filter, sort and display controls with active chips and Reset view.

<Toolbar aria-label="View controls">
  <FilterButton … />
  <SortMenu … />
  <ToolbarSeparator />
  <DisplayOptions … />
</Toolbar>

Filter bar

<Toolbar aria-label="Tasks controls" className="flex-wrap">
  <MenuTrigger>
    <Button variant="outline" size="md"><Filter /> Filter</Button>
    <Menu aria-label="Filter by">…</Menu>
  </MenuTrigger>
  <MenuTrigger>
    <Button variant="outline" size="md"><ArrowDownUp /> Sort</Button>
    <Menu aria-label="Sort by" selectionMode="single">…</Menu>
  </MenuTrigger>
  <ToolbarSeparator />
  <MenuTrigger>
    <Button variant="outline" size="md"><SlidersHorizontal /> Display</Button>
    <Menu aria-label="Display properties" selectionMode="multiple">…</Menu>
  </MenuTrigger>
</Toolbar>

Editor formatting

Independent formatting toggles announce their state with aria-pressed.

<Toolbar aria-label="Editor formatting">
  <Button variant="ghost" aria-pressed={bold} onPress={() => setBold(!bold)}><Bold /> Bold</Button>
  <Button variant="ghost" aria-pressed={italic} onPress={() => setItalic(!italic)}><Italic /> Italic</Button>
  <Button variant="ghost" aria-pressed={link} onPress={() => setLink(!link)}><Link /> Link</Button>
</Toolbar>

Gantt zoom

Arrow to a zoom choice, then Enter or Space to select it. Today restores the current week in this demo.

<Toolbar aria-label="Timeline zoom">
  <SegmentedControl aria-label="Zoom" size="md" value={zoom} onChange={setZoom}
    options={[{ value: "day", label: "Day" }, { value: "week", label: "Week" }, { value: "month", label: "Month" }]} />
  <ToolbarSeparator />
  <Button variant="outline" onPress={() => setZoom("week")}>Today</Button>
</Toolbar>

Literal anatomy

Static component anatomy; bind events in the consuming app.

<Toolbar aria-label="Actions"><Button variant="outline">Filter</Button><ToolbarSeparator /><Button variant="ghost">Refresh</Button></Toolbar>