Toolbar
Horizontal action bar grouping related controls with ARIA toolbar role and keyboard navigation.
Examples
Formatting
Text formatting toolbar with multi-select toggle buttons.
With separator
Toolbar groups separated by a vertical divider.
With dropdown
Toolbar that includes a dropdown button for heading levels.
Media controls
Play/pause, skip, and mute controls styled as a toolbar.
Installation
pnpm add @rokle/components @rokle/tokensInstalls with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.
Usage
import { Toolbar } from "@rokle/components";import { Toolbar } from "@rokle/components";
export function Example() {
return <Toolbar />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Toolbar action elements. |
| orientation | "horizontal" | "vertical" | "horizontal" | Toolbar layout direction. |