Usage

import { Toolbar } from '@heroui/react';

Examples

To customize the Toolbar component classes, you can use the @layer components directive. Learn more.

@layer components {
  .toolbar {
    @apply gap-4 rounded-lg bg-surface p-3;
  }
}

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

The Toolbar component uses these CSS classes (View source styles):

.toolbar - Base container
.toolbar--horizontal - Horizontal orientation (default)
.toolbar--vertical - Vertical orientation
.toolbar--attached - Attached variant with surface background and full rounding

Prop	Type	Default	Description
`isAttached`	`boolean`	`false`	Whether the toolbar has a surface background with full rounding
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	The orientation of the toolbar
`aria-label`	`string`	-	An accessible label for the toolbar
`aria-labelledby`	`string`	-	The id of an element that labels the toolbar
`children`	`React.ReactNode \| (values: ToolbarRenderProps) => React.ReactNode`	-	Content or render prop
`className`	`string \| (values: ToolbarRenderProps) => string`	-	Additional CSS classes

When using the render prop pattern, these values are provided:

Prop	Type	Description
`orientation`	`"horizontal" \| "vertical"`	The current orientation of the toolbar