Toolbar

A container for grouping a set of buttons and controls.

API Reference

Preview

Installation

Usage

import {
  Toolbar,
  ToolbarButton,
  ToolbarGroup,
  ToolbarSeparator,
} from "@/components/ui/toolbar"
import { Toggle } from "@/components/ui/toggle"
import { Button } from "@/components/ui/button"
<Toolbar>
  <ToolbarGroup>
    <ToolbarButton render={<Toggle size="sm" variant="ghost" />}>
      Bold
    </ToolbarButton>
    <ToolbarButton render={<Toggle size="sm" variant="ghost" />}>
      Italic
    </ToolbarButton>
  </ToolbarGroup>
  <ToolbarSeparator />
  <ToolbarButton render={<Button size="sm" />}>Save</ToolbarButton>
</Toolbar>

API Reference

Toolbar

Root component. Styled wrapper for Toolbar.Root from Base UI.

ToolbarGroup

Groups related toolbar items. Styled wrapper for Toolbar.Group from Base UI.

ToolbarButton

Button within the toolbar. Alias for Toolbar.Button from Base UI. Use with render prop to render as Toggle or Button.

ToolbarSeparator

Visual separator between toolbar items. Renders a vertical Separator.

Link within the toolbar. Alias for Toolbar.Link from Base UI.

ToolbarInput

Input within the toolbar. Alias for Toolbar.Input from Base UI.

All props from Base UI Toolbar are also supported.