# Toolbar

Group related actions with directional keyboard navigation.

Formatting toolbar

[Complete TSX file](/examples/toolbar/default.tsx)

```tsx
"use client";

import {
  AlignCenterIcon,
  AlignLeftIcon,
  AlignRightIcon,
  DollarSignIcon,
  PercentIcon,
} from "lucide-react";
import type { ReactElement } from "react";
import { Button } from "@/siteplane/components/button";
import {
  Select,
  SelectItem,
  SelectPopup,
  SelectTrigger,
  SelectValue,
} from "@/siteplane/components/select";
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/siteplane/components/toggle-group";
import {
  Toolbar,
  ToolbarButton,
  ToolbarGroup,
  ToolbarSeparator,
} from "@/siteplane/components/toolbar";
import {
  Tooltip,
  TooltipPopup,
  TooltipProvider,
  TooltipTrigger,
} from "@/siteplane/components/tooltip";

const alignments = [
  { label: "Align left", value: "left", Icon: AlignLeftIcon },
  { label: "Align center", value: "center", Icon: AlignCenterIcon },
  { label: "Align right", value: "right", Icon: AlignRightIcon },
];

const fonts = [
  { label: "Helvetica", value: "helvetica" },
  { label: "Arial", value: "arial" },
  { label: "Times New Roman", value: "times-new-roman" },
];

function Hint({
  children,
  content,
}: {
  children: ReactElement;
  content: string;
}) {
  return (
    <Tooltip>
      <TooltipTrigger render={children} />
      <TooltipPopup sideOffset={8}>{content}</TooltipPopup>
    </Tooltip>
  );
}

export default function Example() {
  return (
    <TooltipProvider>
      <Toolbar aria-label="Formatting">
        <ToggleGroup
          aria-label="Text alignment"
          className="gap-1"
          defaultValue={["left"]}
        >
          {alignments.map(({ label, value, Icon }) => (
            <Hint content={label} key={value}>
              <ToolbarButton
                aria-label={label}
                render={<ToggleGroupItem value={value} />}
              >
                <Icon />
              </ToolbarButton>
            </Hint>
          ))}
        </ToggleGroup>
        <ToolbarSeparator />
        <ToolbarGroup aria-label="Number format">
          <Hint content="Format as currency">
            <ToolbarButton
              aria-label="Format as currency"
              render={<Button shape="square" variant="ghost" />}
            >
              <DollarSignIcon />
            </ToolbarButton>
          </Hint>
          <Hint content="Format as percent">
            <ToolbarButton
              aria-label="Format as percent"
              render={<Button shape="square" variant="ghost" />}
            >
              <PercentIcon />
            </ToolbarButton>
          </Hint>
        </ToolbarGroup>
        <ToolbarSeparator />
        <ToolbarGroup>
          <Select defaultValue="helvetica" items={fonts}>
            <Hint content="Select a different font">
              <ToolbarButton
                render={
                  <SelectTrigger aria-label="Font">
                    <SelectValue />
                  </SelectTrigger>
                }
              />
            </Hint>
            <SelectPopup>
              {fonts.map(({ label, value }) => (
                <SelectItem key={value} value={value}>
                  {label}
                </SelectItem>
              ))}
            </SelectPopup>
          </Select>
        </ToolbarGroup>
        <ToolbarSeparator />
        <ToolbarButton render={<Button />}>Save</ToolbarButton>
      </Toolbar>
    </TooltipProvider>
  );
}
```

## Installation

Complete [one-time setup](/docs/installation/) first.

```bash
pnpm dlx shadcn@4.18.0 add @siteplane/toolbar
```

With npm: `npx shadcn@4.18.0 add @siteplane/toolbar`. [Registry JSON](/registry/toolbar.json) lists source files and dependencies.

For this page’s examples, also install:

```bash
pnpm dlx shadcn@4.18.0 add @siteplane/button @siteplane/select @siteplane/toggle-group @siteplane/tooltip
```

## Usage

```tsx
import { Toolbar, ToolbarButton } from "@/siteplane/components/toolbar";

<Toolbar aria-label="Actions">
  <ToolbarButton>Undo</ToolbarButton>
</Toolbar>;
```

## Composition

```text
Toolbar
├── ToolbarGroup → ToolbarButton / ToolbarLink / ToolbarInput
├── ToolbarSeparator
└── ToolbarGroup
```

## API reference

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| Toolbar | ToolbarPrimitive.Root.Props | Base UI defaults | orientation, loopFocus, disabled and native root props. |
| Toolbar.size | sm \| md \| lg \| xl | provider / lg | Control size of its buttons, links, groups and input. ToolbarButton, ToolbarLink and ToolbarGroup also take size, which wins over the toolbar's; a group passes its size on to the controls inside it. |
| ToolbarButton | ToolbarPrimitive.Button.Props | Kit ghost Button | disabled, focusableWhenDisabled, onClick and render. |
| ToolbarLink | ToolbarPrimitive.Link.Props | Kit ghost Button rendered as an anchor | href and render for router integration. |
| ToolbarInput.insetStart / insetEnd | InputProps inset flags | — | Reserves space for input adornments. Other props follow ToolbarPrimitive.Input. |
| ToolbarGroup | ToolbarPrimitive.Group.Props | — | Related action group. |
| ToolbarSeparator | ToolbarPrimitive.Separator.Props | Kit Separator | Visual and semantic separator. |
| ToolbarPrimitive | Base UI Toolbar namespace | — | Base UI parts and types. |

[Read the installed source](/source/toolbar).

## Usage notes

Give the toolbar and meaningful subgroups accessible labels. Native Tab enters the toolbar; arrow keys move among controls according to orientation. See [Base UI Toolbar](https://base-ui.com/react/components/toolbar) for exact focus, orientation and render behavior.