Toolbar

A container for grouping a set of buttons and controls.

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 directly in the toolbar — wrap each ToggleGroupItem in a ToolbarButton via render so it joins the toolbar’s roving focus.

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>
  );
}

Built on Base UI 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.