HeroUI Toolbar

Buttons 5

About

Toolbar from HeroUI v3 — a container for grouping interactive controls (buttons, button groups, toggle buttons) into a single accessible bar with roving arrow-key navigation. Supports horizontal and vertical orientation, an attached variant with a surface background and full rounding, and Separator dividers between groups. Built on React Aria for full keyboard and screen-reader support; ships the real @heroui/react package with @heroui/styles BEM CSS.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds HeroUI Toolbar to your project and fits it to your theme.

Code

How HeroUI Toolbar is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  Toolbar,
  Button,
  ButtonGroup,
  Separator,
  ToggleButton,
  ToggleButtonGroup,
} from "@/components/ui/heroui-toolbar"
import { Bold, Italic, Underline, Undo2, Redo2 } from "lucide-react"

export default function Vertical() {
  return (
    <Toolbar aria-label="Tools" orientation="vertical">
      <ToggleButtonGroup aria-label="Text style" selectionMode="multiple">
        <ToggleButton isIconOnly aria-label="Bold" id="bold">
          <Bold className="size-4" />
        </ToggleButton>
        <ToggleButton isIconOnly aria-label="Italic" id="italic">
          <ToggleButtonGroup.Separator />
          <Italic className="size-4" />
        </ToggleButton>
        <ToggleButton isIconOnly aria-label="Underline" id="underline">
          <ToggleButtonGroup.Separator />
          <Underline className="size-4" />
        </ToggleButton>
      </ToggleButtonGroup>
      <Separator />
      <ButtonGroup>
        <Button isIconOnly aria-label="Undo" variant="secondary">
          <Undo2 className="size-4" />
        </Button>
        <ButtonGroup.Separator />
        <Button isIconOnly aria-label="Redo" variant="secondary">
          <Redo2 className="size-4" />
        </Button>
      </ButtonGroup>
    </Toolbar>
  )
}