Toolbar

Group a set of related controls. The toolbar will automatically hide when the editor is in a non-editable state.

Refer to the Ariakit Toolbar for more information.

API

<Toolbar>
  <ToolbarItem />
  <ToolbarSeparator />
</Toolbar>

Example

<EditorProvider>
  <Toolbar>
    <ToolbarItem>Command 1</ToolbarItem>
    <ToolbarItem>Command 2</ToolbarItem>
    <ToolbarSeparator />
    <ToolbarItem>Command 3</ToolbarItem>
    <ToolbarItem>Command 4</ToolbarItem>
    <ToolbarItem>Command 5</ToolbarItem>
  </Toolbar>
  <Editor appearance="textBox" />
</EditorProvider>

Optional Props

Refer to the Ariakit Toolbar for more information.

editor

• Type: Editor | null | undefined
• Default: undefined

The editor instance to which the toolbar is attached. If not provided, the toolbar will attempt to use the editor instance from the context.

ToolbarItem

Refer to the Ariakit ToolbarItem for more information.

Optional Props

active

• Type: boolean
• Default: false

Determines whether the item is active or not.