Toolbar

A horizontal action bar that renders divided control groups with an optional overflow menu.

Toolbar arranges controls into groups — each inner array is a cluster, and a vertical separator is drawn between clusters. It scrolls horizontally when space is tight and exposes role="toolbar". Pass overflow (a list of Dropdown sections) to fold lower-priority actions behind a trailing overflow menu. Use it for editor and view controls where related buttons should read as one bar.

Example

Preview

import { Toolbar, IconButton } from '@officina/ui';
import { Bold, Italic, AlignLeft, AlignCenter } from 'lucide-react';

<Toolbar
  groups={[
    [
      <IconButton key="b" icon={<Bold />} aria-label="Bold" variant="ghost" />,
      <IconButton key="i" icon={<Italic />} aria-label="Italic" variant="ghost" />,
    ],
    [
      <IconButton key="l" icon={<AlignLeft />} aria-label="Align left" variant="ghost" />,
      <IconButton key="c" icon={<AlignCenter />} aria-label="Align center" variant="ghost" />,
    ],
  ]}
/>;

API

Prop	Type	Default	Description
groups*	ReactNode[][]	—	Control groups; each inner array renders as a divided cluster.
overflow	DropdownSection[]	—	Actions collapsed into an overflow menu.

Example

API

On this page