Toolbar

Toolbar
Loading...

Installation

Add the component with the CLI.

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

Install the dependencies, then copy the component source into your project.

npm install react-aria-components cn

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