All components (204)

Toolbar

Actions · Toolbar

What it is and when to use it

The controls of a table, an editor or a gallery, together in a named bar. The whole bar is a single Tab stop and the arrow keys move inside it: twelve buttons do not cost twelve Tab presses. BarGroup joins controls under a name ("View", "Data") and BarSeparator puts a line between groups.

When to use it

Above a table or a list: filter, columns, sort, export.
variant outline or raised to put it in a box; flat (the default) leaves the controls loose.
orientation="vertical" for a bar in a column.
overflow="scroll" in narrow places where the bar has to stay on one line.

When not to

Two or three buttons unrelated to each other: loose, without a bar.
Choosing one option among several (list view or grid view): SegmentedGroup.
The actions on the checked rows: SelectionBar.

Keyboard: Tab enters the bar through the first control (or the last one that had focus) and the next Tab leaves it. Inside, Right Arrow and Left Arrow go from one control to another, skipping disabled ones and without wrapping around at the ends; in vertical, Down Arrow and Up Arrow.

Accessibility: label is required: there can be several bars on a screen and it is what the reader announces on entering. Each BarGroup with label is a named group. BarSeparator goes crosswise and is announced that way: vertical in a row bar and horizontal in a column one. Icon-only buttons carry their aria-label.

Fine-tuning: no variables of its own: adjust it with the classes amset-bar, amset-bar__group and amset-bar__separator. It never overflows its box: split (the default) drops whatever does not fit onto another line and scroll leaves a single line that is scrolled sideways.

What it looks like

Enter with Tab and move with the arrow keys.

<Toolbar label="Order list tools">
  <BarGroup label="View">
    <IconButton size="sm" aria-label="Filter the orders"><FilterIcon /></IconButton>
    <IconButton size="sm" aria-label="Sort"><SortIcon /></IconButton>
  </BarGroup>
  <BarSeparator />
  <BarGroup label="Data">
    <Button size="sm" startIcon={<UpIcon />}>Export</Button>
  </BarGroup>
</Toolbar>

Props

Import it with import { Toolbar } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`children`required	`ReactNode`	—
`label`required	`string`	What these tools are for. Required: there can be several bars.
`className`	`string`	Merged with the library classes; it does not replace them.
`orientation`	`BarOrientation`	In a row (default) or in a column. The `BarSeparator` go crosswise.
`overflow`	`"split" \| "scroll"`	What happens when it does not fit: `split` (default) drops the overflow to another line; `scroll` keeps a single line that is scrolled sideways. It never leaves its box.
`variant`	`"outline" \| "raised" \| "flat"`	`flat` (default) leaves the controls loose; `outline` groups them in a box with a border; `raised`, also with a shadow.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: