toolbar

When to use the Toolbar

The Toolbar component is designed for canvas-style tool panels — the kind you find in drawing or diagram editors. It groups ToolbarButton elements into a pill-shaped bar with hover tooltips and active highlights. Use it when you need:

• A tool selector with an "active tool" state
• A set of action buttons that animate between tool modes
• A toolbar that fans out sub-panels for grouped tools

For a standard page action menu (Create / Edit / Delete over a data table), use DataPage.MenuItems instead.

---

Component overview

Component	Purpose
Toolbar	Container — renders a pill-shaped bar of buttons
ToolbarButton	Icon or text button with tooltip and optional active state
ToolbarSeparator	Visual divider between button groups
ToolbarSection	Animated section that transitions between named contexts
ToolbarContext	Named set of buttons inside a ToolbarSection
ToolbarFanOutItem	Button that slides out a horizontal sub-panel on click

All components import from the @cratis/components/Toolbar subpath (never the root barrel — see components.md):

import { Toolbar, ToolbarButton, ToolbarSeparator, ToolbarSection, ToolbarContext, ToolbarFanOutItem } from '@cratis/components/Toolbar';

---

Step 1 — Basic vertical toolbar

Place ToolbarButton elements inside Toolbar. The default orientation is vertical.

import { Toolbar, ToolbarButton } from '@cratis/components/Toolbar';

export const DrawingToolbar = () => (
    <Toolbar>
        <ToolbarButton icon='pi pi-arrow-up-left' tooltip='Select' />
        <ToolbarButton icon='pi pi-pencil' tooltip='Draw' />
        <ToolbarButton icon='pi pi-stop' tooltip='Rectangle' />
    </Toolbar>
);

---

Step 2 — Active state (selected tool)

Use the active prop to highlight the currently selected tool. Drive it from state:

import { useState } from 'react';
import { Toolbar, ToolbarButton } from '@cratis/components/Toolbar';

export const DrawingToolbar = () => {
    const [activeTool, setActiveTool] = useState('select');

    return (
        <Toolbar>
            <ToolbarButton
                icon='pi pi-arrow-up-left'
                tooltip='Select'
                active={activeTool === 'select'}
                onClick={() => setActiveTool('select')}
            />
            <ToolbarButton
                icon='pi pi-pencil'
                tooltip='Draw'
                active={activeTool === 'draw'}
                onClick={() => setActiveTool('draw')}
            />
            <ToolbarButton
                icon='pi pi-stop'
                tooltip='Rectangle'
                active={activeTool === 'rect'}
                onClick={() => setActiveTool('rect')}
            />
        </Toolbar>
    );
};