# Toolbar (/docs/toolbar)
## API Reference [#api-reference]
## Basic [#basic]
{`
import {
BellIcon,
Toolbar,
ToolbarButton,
ToolbarGroup,
ToolbarInput,
ToolbarLink,
ToolbarSeparator,
} from "moduix";
export function ToolbarDemo() {
return (
UndoRedoHistory
);
}
`}
{(context) => }
{(context) => }
## Anatomy [#anatomy]
`Toolbar` groups related controls into one keyboard navigation region. Use visible parts for
actions, grouped actions, separators, inputs, and links.
```text
Toolbar[aria-label]
├─ ToolbarGroup[aria-label]
│ └─ ToolbarButton
├─ ToolbarSeparator
├─ ToolbarInput
├─ ToolbarButton
└─ ToolbarLink
```
```tsx
UndoRedoHistory
```
| Part | Role |
| ------------------ | ------------------------------------------------------------------------------------------------- |
| `Toolbar` | Root toolbar region. Controls orientation, disabled state, visual `variant`, and control `size`. |
| `ToolbarGroup` | Groups related controls inside the toolbar and gives them a shared label when needed. |
| `ToolbarButton` | Toolbar-aware button. Compose it with `Toggle`, `SelectTrigger`, or another trigger via `render`. |
| `ToolbarInput` | Native input that participates in toolbar keyboard navigation. |
| `ToolbarLink` | Toolbar-aware anchor for related navigation or metadata links. |
| `ToolbarSeparator` | Visual separator. By default it uses the opposite orientation of the root toolbar. |
`Toolbar` does not use portal-like service layers such as `portal`, `positioner`, `backdrop`,
or `viewport`. All exported parts are visible composition slots, so style the root and parts
directly with `className` or scoped CSS variables.
## Composition [#composition]
Use `Toolbar` for shared behavior and layout props: `aria-label`, `orientation`, `disabled`,
`variant`, and `size`. Use `ToolbarGroup` when a subset of controls needs its own accessible
name, and use `ToolbarSeparator` to divide unrelated groups.
`ToolbarButton` supports the Base UI `render` prop. This lets one element act as both a toolbar
item and another interactive primitive, such as a `Toggle` or `SelectTrigger`, without nesting
interactive elements.
```tsx
```
Popup primitives rendered from toolbar buttons, such as `SelectContent`, own their internal
portal and positioner behavior. Configure those slots on that popup component, not on `Toolbar`.
## Examples [#examples]
### Toggle Group [#toggle-group]
Compose `ToolbarButton` with `Toggle` inside a `ToggleGroup` when toolbar items need pressed state.
{`
import {
BellIcon,
StarIcon,
Toggle,
ToggleGroup,
Toolbar,
ToolbarButton,
ToolbarGroup,
ToolbarSeparator,
} from "moduix";
export function ToolbarToggleGroupDemo() {
return (
} value="bold" aria-label="Bold">
B} value="italic" aria-label="Italic">
I} value="underline" aria-label="Underline">
U
);
}
`}
### Select And Input [#select-and-input]
Use the `render` prop to turn toolbar buttons into popup triggers, and keep inputs limited in horizontal toolbars.
{`
import {
ChevronUpDownIcon,
Select,
SelectContent,
SelectIcon,
SelectItem,
SelectItemIndicator,
SelectItemText,
SelectList,
SelectTrigger,
SelectValue,
Toolbar,
ToolbarButton,
ToolbarInput,
ToolbarLink,
ToolbarSeparator,
} from "moduix";
export function ToolbarSelectInputDemo() {
return (
History
);
}
`}
{`
const fonts = ["Inter", "Arial", "Helvetica", "Georgia"];
`}
### Variants [#variants]
Use `variant` to match the toolbar surface to the surrounding layout.
{`
import { BellIcon, Toolbar, ToolbarButton, ToolbarSeparator } from "moduix";
export function ToolbarVariantsDemo() {
return (
<>
UndoRedoUndoRedoUndoRedo
);
}
`}
### Sizes [#sizes]
Use `size` to align toolbar controls with compact or roomy interfaces.
{`
import { BellIcon, Toolbar, ToolbarButton, ToolbarSeparator } from "moduix";
export function ToolbarSizesDemo() {
return (
<>
UndoRedoUndoRedoUndoRedo
);
}
`}
### Vertical [#vertical]
Set `orientation="vertical"` for toolbars that stack controls in a column.
{`
import { StarIcon, Toolbar, ToolbarButton, ToolbarSeparator } from "moduix";
export function ToolbarVerticalDemo() {
return (
MoveScale
);
}
`}
### Disabled Controls [#disabled-controls]
Disable individual toolbar controls when an action is visible but unavailable.
{`
import {
BellIcon,
Toolbar,
ToolbarButton,
ToolbarInput,
ToolbarSeparator,
} from "moduix";
export function ToolbarDisabledControlsDemo() {
return (
UndoRedo
);
}
`}
### Custom Icons [#custom-icons]
Pass icons as children. Icon-only buttons must include an accessible label.
{`
import { Toolbar, ToolbarButton } from "moduix";
export function ToolbarCustomIconsDemo() {
return (
);
}
function AlignLeftIcon() {
return (
);
}
function AlignCenterIcon() {
return (
);
}
function AlignRightIcon() {
return (
);
}
`}
### Class Names [#class-names]
Pass `className` to the root and each part when styling with CSS Modules, Tailwind CSS, or CSS-in-JS.
{`
import {
Toolbar,
ToolbarButton,
ToolbarInput,
ToolbarSeparator,
} from "moduix";
export function ToolbarClassNamesDemo() {
return (
DayWeek
);
}
`}
{`
.customToolbar {
--toolbar-bg: color-mix(in oklab, var(--color-primary) 7%, transparent);
--toolbar-border-color: color-mix(in oklab, var(--color-primary) 36%, var(--color-border));
--toolbar-gap: var(--spacing-1);
--toolbar-padding: var(--spacing-1);
--toolbar-radius: var(--radius-md);
--toolbar-control-bg-hover: color-mix(in oklab, var(--color-primary) 14%, transparent);
--toolbar-control-bg-pressed: var(--color-primary);
--toolbar-control-color-pressed: var(--color-primary-foreground);
--toolbar-separator-color: color-mix(in oklab, var(--color-primary) 42%, var(--color-border));
}
.customButton {
--toolbar-control-radius: var(--radius-sm);
--toolbar-control-padding-x: var(--spacing-3);
}
.customInput {
--toolbar-input-width: 8rem;
}
`}