Toolbar

A container for grouping a set of controls such as buttons, toggle groups, or menus. Toolbars provide a convenient way to organize related actions and maintain keyboard navigation between controls.

Import

import * as Toolbar from '@base-ui/react/Toolbar';

Basic Usage

<Toolbar.Root>
  <Toolbar.Button>Bold</Toolbar.Button>
  <Toolbar.Button>Italic</Toolbar.Button>
  <Toolbar.Button>Underline</Toolbar.Button>
  <Toolbar.Separator />
  <Toolbar.Button>Align Left</Toolbar.Button>
  <Toolbar.Button>Align Center</Toolbar.Button>
  <Toolbar.Button>Align Right</Toolbar.Button>
</Toolbar.Root>

Key Components

A container for grouping a set of controls. Renders a <div> element. Key Props:

orientation: 'horizontal' | 'vertical' - The orientation of the toolbar (default: 'horizontal')
disabled: boolean - Whether the whole toolbar is disabled (default: false)
loopFocus: boolean - If true, keyboard navigation will wrap focus to the other end of the toolbar once the end is reached (default: true)

State:

data-orientation: 'horizontal' | 'vertical' - The orientation of the toolbar
data-disabled: Present when the toolbar is disabled

A button within the toolbar. Renders a <button> element. Key Props:

disabled: boolean - Whether the button is disabled

State:

data-disabled: Present when the button is disabled

A link within the toolbar. Renders an <a> element. Key Props:

href: string - The URL the link points to

An input field within the toolbar. Renders an <input> element. Key Props:

Standard input props like type, value, onChange, etc.

Groups related toolbar items together. Renders a <div> element. A visual separator between toolbar items. Renders a <div> element. State:

data-orientation: Reflects the parent toolbar’s orientation

Features

Keyboard navigation with arrow keys
Support for horizontal and vertical orientations
Grouping of related controls
Visual separators
Loop focus option
Accessible ARIA attributes (role="toolbar")
Support for buttons, links, and inputs

Styling Example

.ToolbarRoot {
  display: flex;
  gap: 4px;
  padding: 8px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.ToolbarRoot[data-orientation="vertical"] {
  flex-direction: column;
}

.ToolbarButton {
  padding: 6px 12px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
}

.ToolbarButton:hover {
  background: #e5e5e5;
}

.ToolbarButton[data-disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.ToolbarSeparator {
  width: 1px;
  background: #ddd;
  margin: 0 4px;
}

.ToolbarSeparator[data-orientation="vertical"] {
  width: auto;
  height: 1px;
  margin: 4px 0;
}

.ToolbarGroup {
  display: flex;
  gap: 2px;
}

Common Patterns

<Toolbar.Root>
  <Toolbar.Group>
    <Toolbar.Button aria-label="Bold">B</Toolbar.Button>
    <Toolbar.Button aria-label="Italic">I</Toolbar.Button>
    <Toolbar.Button aria-label="Underline">U</Toolbar.Button>
  </Toolbar.Group>
  
  <Toolbar.Separator />
  
  <Toolbar.Group>
    <Toolbar.Button aria-label="Align left">←</Toolbar.Button>
    <Toolbar.Button aria-label="Align center">↔</Toolbar.Button>
    <Toolbar.Button aria-label="Align right">→</Toolbar.Button>
  </Toolbar.Group>
  
  <Toolbar.Separator />
  
  <Toolbar.Group>
    <Toolbar.Button aria-label="Link">🔗</Toolbar.Button>
    <Toolbar.Button aria-label="Image">🖼</Toolbar.Button>
  </Toolbar.Group>
</Toolbar.Root>

<Toolbar.Root orientation="vertical">
  <Toolbar.Button aria-label="Home">Home</Toolbar.Button>
  <Toolbar.Button aria-label="Search">Search</Toolbar.Button>
  <Toolbar.Button aria-label="Settings">Settings</Toolbar.Button>
  <Toolbar.Separator />
  <Toolbar.Button aria-label="Profile">Profile</Toolbar.Button>
  <Toolbar.Button aria-label="Logout">Logout</Toolbar.Button>
</Toolbar.Root>

With Input Fields

<Toolbar.Root>
  <Toolbar.Button aria-label="Font family">Font</Toolbar.Button>
  <Toolbar.Input 
    type="number" 
    min="8" 
    max="72" 
    defaultValue="16"
    aria-label="Font size"
  />
  <Toolbar.Separator />
  <Toolbar.Button aria-label="Bold">B</Toolbar.Button>
  <Toolbar.Button aria-label="Italic">I</Toolbar.Button>
</Toolbar.Root>

const [disabled, setDisabled] = React.useState(false);

<>
  <button onClick={() => setDisabled(!disabled)}>
    Toggle toolbar
  </button>
  
  <Toolbar.Root disabled={disabled}>
    <Toolbar.Button>Action 1</Toolbar.Button>
    <Toolbar.Button>Action 2</Toolbar.Button>
    <Toolbar.Button>Action 3</Toolbar.Button>
  </Toolbar.Root>
</>

With Links

<Toolbar.Root>
  <Toolbar.Link href="/dashboard">Dashboard</Toolbar.Link>
  <Toolbar.Separator />
  <Toolbar.Link href="/projects">Projects</Toolbar.Link>
  <Toolbar.Separator />
  <Toolbar.Link href="/team">Team</Toolbar.Link>
  <Toolbar.Separator />
  <Toolbar.Button>Settings</Toolbar.Button>
</Toolbar.Root>

<Toolbar.Root className="AppToolbar">
  <Toolbar.Group>
    <Toolbar.Button aria-label="New file">New</Toolbar.Button>
    <Toolbar.Button aria-label="Open file">Open</Toolbar.Button>
    <Toolbar.Button aria-label="Save file">Save</Toolbar.Button>
  </Toolbar.Group>
  
  <Toolbar.Separator />
  
  <Toolbar.Group>
    <Toolbar.Button aria-label="Undo">Undo</Toolbar.Button>
    <Toolbar.Button aria-label="Redo">Redo</Toolbar.Button>
  </Toolbar.Group>
  
  <Toolbar.Separator />
  
  <Toolbar.Group>
    <Toolbar.Button aria-label="Cut">Cut</Toolbar.Button>
    <Toolbar.Button aria-label="Copy">Copy</Toolbar.Button>
    <Toolbar.Button aria-label="Paste">Paste</Toolbar.Button>
  </Toolbar.Group>
</Toolbar.Root>

Getting Started

Handbook

Inputs

Data Display

Navigation

Overlays

Forms

Layout

Utilities

Import

Basic Usage

Key Components

Features

Styling Example

Common Patterns

With Input Fields

With Links

​Import

​Basic Usage

​Key Components

​Toolbar.Root

​Toolbar.Button

​Toolbar.Link

​Toolbar.Input

​Toolbar.Group

​Toolbar.Separator

​Features

​Styling Example

​Common Patterns

​Text Editor Toolbar

​Vertical Toolbar

​With Input Fields

​Disabled Toolbar

​With Links

​Application Toolbar

Import

Basic Usage

Key Components

Toolbar.Root

Toolbar.Button

Toolbar.Link

Toolbar.Input

Toolbar.Group

Toolbar.Separator

Features

Styling Example

Common Patterns

Text Editor Toolbar

Vertical Toolbar

With Input Fields

Disabled Toolbar

With Links

Application Toolbar