Actions

Toolbar

A row of grouped controls for an editor or view.

import { Toolbar, ToolbarButton, ToolbarToggleGroup, ToolbarToggleItem } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Resume editor

Show code

toolbar/editor.tsx

'use client';

import {
  Toolbar,
  ToolbarButton,
  ToolbarSeparator,
  ToolbarToggleGroup,
  ToolbarToggleItem,
} from '@jsonresume/ui';
import { Download, Eye, Redo2, Undo2, Wand2 } from 'lucide-react';

export default function ToolbarEditor() {
  return (
    <Toolbar label="Resume editor">
      <ToolbarButton aria-label="Undo">
        <Undo2 aria-hidden="true" />
      </ToolbarButton>
      <ToolbarButton aria-label="Redo">
        <Redo2 aria-hidden="true" />
      </ToolbarButton>
      <ToolbarSeparator />
      <ToolbarToggleGroup
        type="single"
        defaultValue="split"
        aria-label="Layout"
      >
        <ToolbarToggleItem value="edit">Edit</ToolbarToggleItem>
        <ToolbarToggleItem value="split">Split</ToolbarToggleItem>
        <ToolbarToggleItem value="preview">
          <Eye aria-hidden="true" /> Preview
        </ToolbarToggleItem>
      </ToolbarToggleGroup>
      <ToolbarSeparator />
      <ToolbarButton>
        <Wand2 aria-hidden="true" /> Improve with AI
      </ToolbarButton>
      <ToolbarButton>
        <Download aria-hidden="true" /> Export
      </ToolbarButton>
    </Toolbar>
  );
}

Accessibility

One Tab stop: arrow keys move between controls (roving focus).
Icon-only buttons need aria-label.

Props

Also accepts the attributes of the element Toolbar renders.
Prop	Type	Default	Description
label required	string	–	Names the toolbar, e.g. "Editor".

No props of its own; accepts the attributes of the element it renders.

No props of its own; accepts the attributes of the element it renders.

No props of its own; accepts the attributes of the element it renders.