# Toolbar (/docs/components/toolbar)



<ComponentPreview name="toolbar-demo" />

## Overview [#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 [#anatomy]

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

## Usage guidance [#usage-guidance]

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

## Accessibility [#accessibility]

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

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add toolbar
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="toolbar" title="components/ui/toolbar.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import { Button } from "@/registry/default/ui/button"
import { Toggle } from "@/registry/default/ui/toggle"
import {
  Toolbar,
  ToolbarButton,
  ToolbarGroup,
  ToolbarSeparator,
} from "@/registry/default/ui/toolbar"
```

```tsx
<Toolbar>
  <ToolbarGroup>
    <ToolbarButton render={<Toggle />}>Bold</ToolbarButton>
    <ToolbarButton render={<Toggle />}>Underline</ToolbarButton>
  </ToolbarGroup>
  <ToolbarSeparator />
  <ToolbarButton render={<Button />}>Save</ToolbarButton>
</Toolbar>
```