Toolbar

A container for interactive controls with arrow key navigation.

Usage

1import { Toolbar } from '@lenso/ui';

1"use client";2export { Basic } from "./source";

Examples

Vertical

1"use client";2export { Vertical } from "./source";

Attached

1"use client";2export { Attached } from "./source";

With ButtonGroup

1"use client";2export { WithButtonGroup } from "./source";

Customization

Tailwind CSS

1"use client";2export { CustomStyles } from "./source";

Global CSS

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

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

Styling Reference

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

CSS Classes

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

API Reference

Toolbar

Inherits from React Aria Toolbar.

Render Props

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

Related Components