---
title: "Toolbar"
description: "Groups related actions in a row or column. Base UI applies roving tabindex so the keyboard moves through the bar with the arrow keys."
kind: component
id: C-036
registry: "toolbar"
docs: "https://koten.codehive.com.co/components/toolbar"
markdown: "https://koten.codehive.com.co/md/components/toolbar.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/toolbar.json"
language: en
---

# Toolbar · ツールバー

> Component C-036 in the Koten UI catalog.

Groups related actions in a row or column. Base UI applies roving tabindex so the keyboard moves through the bar with the arrow keys.

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

```bash
# Node
npx shadcn@latest add https://koten.codehive.com.co/r/toolbar.json

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/toolbar.json
```

## Files

- `@/components/ui/toolbar.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Reference

- Upstream primitive: https://base-ui.com/react/components/toolbar

## Examples

### Horizontal bar

Groups separated by rules; each button has an accessible name and the icon is decorative.

```tsx
<Toolbar label="Order actions">
  <ToolbarGroup label="View">
    <ToolbarButton label="Grid"><Grid2X2 /></ToolbarButton>
    <ToolbarButton label="List"><List /></ToolbarButton>
  </ToolbarGroup>
  <ToolbarSeparator />
  <ToolbarGroup label="Data">
    <ToolbarButton label="Filter"><Filter /></ToolbarButton>
    <ToolbarButton label="Download"><Download /></ToolbarButton>
  </ToolbarGroup>
  <ToolbarSeparator />
  <ToolbarButton label="Delete selection" className="text-danger">
    <Trash2 />
  </ToolbarButton>
</Toolbar>
```

### Vertical orientation

A vertical orientation stacks the controls and changes the arrow-key axis.

```tsx
<Toolbar label="Order actions" orientation="vertical">
  <ToolbarButton label="Filter"><Filter /></ToolbarButton>
  <ToolbarButton label="Download"><Download /></ToolbarButton>
  <ToolbarButton label="Settings"><Settings /></ToolbarButton>
</Toolbar>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `label` | `string` | `—` | Accessible name of the bar. |
| `children` | `ReactNode` | `—` | Groups, buttons and separators that make up the bar. |
| `orientation` | `horizontal \| vertical` | `horizontal` | Aligns the controls and defines the arrow-key axis. |
| `className` | `string` | `—` | Applied to the Base UI root. |
| `ToolbarGroup.label` | `string` | `—` | Accessible name of the inner group. |
| `ToolbarButton.label` | `string` | `—` | Accessible name of the button; the icon becomes decorative. |
| `ToolbarButton.disabled` | `boolean` | `false` | Excludes the button from interaction and arrow-key traversal. |

## Accessibility

- label names the toolbar and ToolbarGroup.label names each group.
- Base UI applies roving tabindex: only one control enters the tab order.
- The arrow keys move through the controls along the orientation axis.
- Separators are not focusable and the button icons are decorative.

## Sources

- Catalog page: https://koten.codehive.com.co/components/toolbar
- Markdown: https://koten.codehive.com.co/md/components/toolbar.md
- Repository: https://github.com/codehive-colombia/koten