Toolbar
A compact UI container that groups multiple actions, controls, or tools for quick access, improved workflow efficiency, and streamlined user interactions.
Installation
Install the component via the CLI in one command.
npx shadcn@latest add @intentui/toolbar
Composed components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
Manual installation
Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.
npm install react-aria-components tailwind-merge
Anatomy
import { Toolbar, ToolbarGroup, ToolbarItem, ToolbarSeparator } from "@/components/ui/toolbar"<Toolbar>
<ToolbarGroup>
<ToolbarItem />
<ToolbarItem />
<ToolbarItem />
</ToolbarGroup>
<ToolbarSeparator />
<ToolbarGroup>
<ToolbarItem />
</ToolbarGroup>
</Toolbar>Examples
Orientation
By default, the toolbar is displayed horizontally. You can change it to vertical using the orientation prop.
Disabled
You can disable a toolbar either as a group or individually by using the isDisabled prop.
Component API
Toolbar
The Toolbar component groups related controls.
| Prop | Type | Default |
|---|---|---|
className | string | - |
isCircle | boolean | - |
ToolbarGroup
The ToolbarGroup component groups toolbar items.
| Prop | Type | Default |
|---|---|---|
className | string | - |
ToolbarItem
The ToolbarItem component represents one toolbar toggle item.
| Prop | Type | Default |
|---|---|---|
className | string | - |
ToolbarSeparator
The ToolbarSeparator component separates toolbar groups.
| Prop | Type | Default |
|---|---|---|
className | string | - |
See the React Aria for the full API reference.
Unlock the full power ofIntent UI Design
Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.