---
title: Toolbar
description: "A container for grouping a set of buttons and controls."
---

```tsx
import { Button } from '@/components/ui/button';
import { Toggle } from '@/components/ui/toggle';
import {
  Toolbar,
  ToolbarButton,
  ToolbarGroup,
  ToolbarSeparator,
} from '@/components/ui/toolbar';

export default function ToolbarDemo() {
  return (
    <Toolbar>
      <ToolbarGroup>
        <ToolbarButton render={<Toggle aria-label="Toggle bold" />}>
          Bold
        </ToolbarButton>
        <ToolbarButton render={<Toggle aria-label="Toggle italic" />}>
          Italic
        </ToolbarButton>
      </ToolbarGroup>
      <ToolbarSeparator />
      <ToolbarButton render={<Button variant="ghost" size="sm" />}>
        Share
      </ToolbarButton>
    </Toolbar>
  );
}
```

## Install

```bash
npx shadcn@latest add @madeui/toolbar
```

## Usage

```tsx
import {
  Toolbar,
  ToolbarButton,
  ToolbarGroup,
  ToolbarSeparator,
} from '@/components/ui/toolbar';
```

## Composition

```tsx
<Toolbar>
  <ToolbarGroup>
    <ToolbarButton render={<Toggle />} />
  </ToolbarGroup>
  <ToolbarSeparator />
  <ToolbarButton render={<Button variant="ghost" size="sm" />} />
</Toolbar>
```

## With a toggle group

Compose a [`ToggleGroup`](/docs/components/toggle-group) directly in the toolbar — wrap each `ToggleGroupItem` in a `ToolbarButton` via `render` so it joins the toolbar's roving focus.

```tsx
import { Button } from '@/components/ui/button';
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
import {
  Toolbar,
  ToolbarButton,
  ToolbarSeparator,
} from '@/components/ui/toolbar';

export default function ToolbarWithToggleGroup() {
  return (
    <Toolbar>
      <ToggleGroup variant="outline" spacing="joined" defaultValue={['left']}>
        <ToolbarButton render={<ToggleGroupItem value="left" aria-label="Align left" />}>
          <svg
            width="16"
            height="16"
            viewBox={`0 0 16 16`}
            fill="none"
            stroke="currentColor"
            strokeWidth="1.5"
            strokeLinecap="round"
            aria-hidden
          >
            <path d={`M2 4h12M2 8h8M2 12h10`} />
          </svg>
        </ToolbarButton>
        <ToolbarButton render={<ToggleGroupItem value="center" aria-label="Align center" />}>
          <svg
            width="16"
            height="16"
            viewBox={`0 0 16 16`}
            fill="none"
            stroke="currentColor"
            strokeWidth="1.5"
            strokeLinecap="round"
            aria-hidden
          >
            <path d={`M2 4h12M4 8h8M3 12h10`} />
          </svg>
        </ToolbarButton>
        <ToolbarButton render={<ToggleGroupItem value="right" aria-label="Align right" />}>
          <svg
            width="16"
            height="16"
            viewBox={`0 0 16 16`}
            fill="none"
            stroke="currentColor"
            strokeWidth="1.5"
            strokeLinecap="round"
            aria-hidden
          >
            <path d={`M2 4h12M6 8h8M4 12h10`} />
          </svg>
        </ToolbarButton>
      </ToggleGroup>
      <ToolbarSeparator />
      <ToolbarButton render={<Button variant="ghost" size="sm" />}>
        Export
      </ToolbarButton>
    </Toolbar>
  );
}
```

## API reference

Built on [Base UI Toolbar](https://base-ui.com/react/components/toolbar). The toolbar provides roving focus and arrow-key navigation; visuals come from the components you compose in via `render` (Button, Toggle, Input, …). `ToolbarButton`, `ToolbarLink`, and `ToolbarInput` are Base UI parts re-exported unstyled. All props are forwarded; see the [Base UI Toolbar API reference](https://base-ui.com/react/components/toolbar#api-reference).