Add a toolbar UI component into Tiptap

Available for free

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

Install

You can add the primitive via Tiptap CLI

npx @tiptap/cli@latest add toolbar

Usage

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

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.

PreviouslyTextarea Autosize

Next upTooltip