---
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 @madeui/cli add 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 * as stylex from '@stylexjs/stylex';
import { AlignCenter, AlignLeft, AlignRight } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
import {
  Toolbar,
  ToolbarButton,
  ToolbarSeparator,
} from '@/components/ui/toolbar';
import { icon } from '@/lib/stylex-utils';

export default function ToolbarWithToggleGroup() {
  return (
    <Toolbar>
      <ToggleGroup variant="outline" spacing="joined" defaultValue={['left']}>
        <ToolbarButton render={<ToggleGroupItem value="left" aria-label="Align left" />}>
          <AlignLeft {...stylex.props(icon.md)} />
        </ToolbarButton>
        <ToolbarButton render={<ToggleGroupItem value="center" aria-label="Align center" />}>
          <AlignCenter {...stylex.props(icon.md)} />
        </ToolbarButton>
        <ToolbarButton render={<ToggleGroupItem value="right" aria-label="Align right" />}>
          <AlignRight {...stylex.props(icon.md)} />
        </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).