---
title: "Add a toolbar UI component into Tiptap"
description: "Organize actions and controls in a horizontal or vertical container. More in the docs!"
canonical_url: "https://tiptap.dev/docs/ui-components/primitives/toolbar"
---

# Add a toolbar UI component into Tiptap

Organize actions and controls in a horizontal or vertical container. More in the docs!

A container for organizing actions and controls in a horizontal or vertical layout.

> **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/icons/bold-icon'
import { ItalicIcon } from '@/components/icons/italic-icon'
import { Spacer } from '@/components/tiptap-ui-primitive/spacer'

export default function MyComponent() {
  return (
    <Toolbar variant="default">
      <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    | 'default' \| 'floating' | 'default' | 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 |