||

Toolbar

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

A container for grouping a set of buttons and controls.

doc
toolbar-demo

Overview

Use Toolbar to group controls that act on the same surface.

Toolbars are useful in editors, tables, canvases, filters, and dashboards where several commands belong together.

Anatomy

A toolbar can contain buttons, toggles, toggle groups, separators, menus, and other compact controls.

Usage guidance

Keep the most common actions visible. Move less common actions into a menu when the toolbar becomes crowded.

Accessibility

Controls inside the toolbar still need labels and keyboard support. Keep focus order predictable.

Installation

 
npx honestui@latest add toolbar

Usage

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