Toolbar

RAC
Loading...

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.

toggleseparator

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.

Loading...

Disabled

You can disable a toolbar either as a group or individually by using the isDisabled prop.

Loading...

Component API

Toolbar

Toolbar extends the React Aria Components <Toolbar> component.

classNamestring
isCircleboolean

ToolbarGroup

ToolbarGroup extends the React Aria Components <Group> component.

classNamestring

ToolbarItem

ToolbarItem extends the Intent UI <Toggle> component.

classNamestring

ToolbarSeparator

ToolbarSeparator extends the React Aria Components <Separator> component.

classNamestring

See the React Aria for the full API reference.

Design
Switch
Calendar