---
title: "Add a toolbar UI component into Tiptap"
description: "Organize actions and controls in an accessible horizontal toolbar. More in the docs!"
canonical_url: "https://tiptap-docs.lin52025i.qzz.io/ui-components/primitives/toolbar"
---

# Add a toolbar UI component into Tiptap

Organize actions and controls in an accessible horizontal toolbar. More in the docs!

A horizontal container for organizing related actions and controls with roving keyboard focus.

> **Interactive demo:** [toolbar](https://template.tiptap.dev/preview/tiptap-ui-primitive/toolbar)

## Install

You can add the primitive via Tiptap CLI

```bash
npx @tiptap/cli@latest add toolbar
```

## Usage

```tsx
import { Toolbar, ToolbarGroup, ToolbarSeparator } from '@/components/tiptap-ui-primitive/toolbar'
import { Button } from '@/components/tiptap-ui-primitive/button'
import { BoldIcon } from '@/components/tiptap-icons/bold-icon'
import { ItalicIcon } from '@/components/tiptap-icons/italic-icon'
import { Spacer } from '@/components/tiptap-ui-primitive/spacer'

export default function MyComponent() {
  return (
    <Toolbar variant="fixed">
      <ToolbarGroup>
        <Button data-style="ghost">
          <BoldIcon className="tiptap-button-icon" />
        </Button>
        <Button data-style="ghost">
          <ItalicIcon className="tiptap-button-icon" />
        </Button>
      </ToolbarGroup>

      <ToolbarSeparator />

      <ToolbarGroup>
        <Button data-style="ghost">Format</Button>
      </ToolbarGroup>

      <Spacer />

      <ToolbarGroup>
        <Button data-style="primary">Save</Button>
      </ToolbarGroup>
    </Toolbar>
  )
}
```

## Props

### Toolbar

| Name       | Type                  | Default   | Description                  |
| ---------- | --------------------- | --------- | ---------------------------- |
| variant    | 'fixed' \| 'floating' | 'fixed'   | Toolbar style variant        |
| data-plain | boolean               | undefined | Whether to use plain styling |

### ToolbarSeparator

| Name        | Type                       | Default    | Description                  |
| ----------- | -------------------------- | ---------- | ---------------------------- |
| orientation | 'horizontal' \| 'vertical' | 'vertical' | Orientation of the separator |

## Keyboard behavior

The toolbar follows a horizontal roving-focus pattern. Disabled controls are skipped, including when
their disabled state changes while the toolbar is open.

| Key                       | Behavior                                                              |
| ------------------------- | --------------------------------------------------------------------- |
| `ArrowLeft`, `ArrowRight` | Move between enabled controls and wrap at either end.                 |
| `Home`, `End`             | Move to the first or last enabled control.                            |
| `Enter`                   | Activate the focused control.                                         |
| `Space`                   | Activate a focused native button using its standard browser behavior. |
| `Tab`, `Shift+Tab`        | Leave the toolbar instead of cycling through its controls.            |

The toolbar does not consume `Escape`; an owning floating element or menu can handle that key.