---
title: Toolbar
description: A row of ghost buttons with arrow-key navigation.
---

```tsx
import { Toolbar } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function ToolbarBasic() {
  return (
    <Preview>
      <Toolbar.Root aria-label="Actions">
        <Toolbar.Button>Action 1</Toolbar.Button>
        <Toolbar.Button>Action 2</Toolbar.Button>
        <Toolbar.Separator />
        <Toolbar.Button>Action 3</Toolbar.Button>
      </Toolbar.Root>
    </Preview>
  );
}
```

- Use a toolbar for a few actions on one object, such as a log line or a panel. Actions for a selection of rows go in the [Action bar](/deft/components/action-bar).
- The toolbar is one tab stop; arrow keys move between its buttons and skip disabled ones.
- Give `Toolbar.Root` an `aria-label` that names what the actions apply to.
- The root shifts left by the button padding, so the first label lines up with the text above it. Buttons wrap onto the next line when the row runs out of room.
- `Toolbar.Separator` splits groups of actions with a short vertical line.

## API

| Prop | Type | Default | Description |
| - | - | - | - |
| `variant?` | `"default" \| "field" \| "primary" \| "ghost" \| "danger"` | `"ghost"` | On Button. |
| `size?` | `"inline" \| "xs" \| "sm" \| "md"` | `"sm"` | On Button. |
| `shape?` | `"rect" \| "pill" \| "square"` | `"rect"` | On Button. |
| `loading?` | `boolean` | - | On Button. Shows a spinner and blocks clicks. |
| `onClick?` | `(event) => unknown` | - | On Button. A returned promise shows the spinner until it settles. |
| `render?` | `ReactElement \| function` | - | On Button. Renders another element, such as a router link. |

`Toolbar.Button` takes the props of [Button](/deft/components/button); a disabled button leaves the tab order. Parts: `Root`, `Button`, `Separator`; Base UI's `Group`, `Link` and `Input` pass through unstyled. Built on Base UI [Toolbar](https://base-ui.com/react/components/toolbar).