Toolbar

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.

ToolbarRenderProps

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