Toolbar
A container for interactive controls with arrow key navigation.
Completeness: behavior-required
The stylesheet is only the visible half of this component. It also needs a keyboard
map, focus managed across more than one element, ARIA attributes that point at other
nodes, and [data-*] attributes that only running code sets — so a CSS-only port will
not reproduce it. Use @blakeui/react, or read the interaction contract from the MCP
server with get_component_behavior("Toolbar") and build the behaviour yourself.
Import
import { Toolbar } from '@blakeui/react';Usage
import {
Button,
ButtonGroup,
Separator,
ToggleButton,Vertical
import {
Button,
ButtonGroup,
Separator,
ToggleButton,With ButtonGroup
import {
Button,
ButtonGroup,
Separator,
ToggleButton,Attached
import {
Button,
ButtonGroup,
Separator,
ToggleButton,Styling
Passing Tailwind CSS classes
import { Toolbar } from '@blakeui/react';
function CustomToolbar() {
return (
<Toolbar
aria-label="Actions"
className="rounded-xl border border-default bg-surface p-2"
>
{/* toolbar content */}
</Toolbar>
);
}Customizing the component classes
To customize the Toolbar component classes, you can use the @layer components directive.
Learn more.
A worked example is in Styling.
blakeUI 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 Props
Inherits from React Aria Toolbar.
| 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 |
ToolbarRenderProps
When using the render prop pattern, these values are provided:
| Prop | Type | Description |
|---|---|---|
orientation | "horizontal" | "vertical" | The current orientation of the toolbar |
