Add a toolbar UI component into Tiptap
Available for free
A container for organizing actions and controls in a horizontal or vertical layout.
Install
You can add the primitive via Tiptap CLI
npx @tiptap/cli@latest add toolbarUsage
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 |