gh-nathanonn-claude-skills-ai-elements-claude-skills-ai-elements/docs/components/toolbar.md

Toolbar

URL: /components/toolbar

---

title: Toolbar description: A styled toolbar component for React Flow nodes with flexible positioning and custom actions. path: elements/components/toolbar

---

The Toolbar component provides a positioned toolbar that attaches to nodes in React Flow canvases. It features modern card styling with backdrop blur and flexbox layout for action buttons and controls.

The Toolbar component is designed to be used with the [Node](/elements/components/node) component. See the [Workflow](/elements/examples/workflow) demo for a full example.

Installation

Usage

import { Toolbar } from "@/components/ai-elements/toolbar";

import { Toolbar } from "@/components/ai-elements/toolbar";
import { Button } from "@/components/ui/button";

const CustomNode = () => (
    <Node>
        <NodeContent>...</NodeContent>
        <Toolbar>
            <Button size="sm" variant="ghost">
                Edit
            </Button>
            <Button size="sm" variant="ghost">
                Delete
            </Button>
        </Toolbar>
    </Node>
);

Features

• Attaches to any React Flow node
• Bottom positioning by default
• Rounded card design with border
• Theme-aware background styling
• Flexbox layout with gap spacing
• Full TypeScript support
• Compatible with all React Flow NodeToolbar features

Props

<Toolbar />

<TypeTable type={{ className: { description: 'Additional CSS classes to apply to the toolbar.', type: 'string', }, '...props': { description: 'Any other props from @xyflow/react NodeToolbar component (position, offset, isVisible, etc.).', type: 'ComponentProps', }, }} />