74 lines
1.8 KiB
Markdown
74 lines
1.8 KiB
Markdown
# 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.
|
|
|
|
<Callout>
|
|
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.
|
|
</Callout>
|
|
|
|
## Installation
|
|
|
|
<ElementsInstaller path="toolbar" />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { Toolbar } from "@/components/ai-elements/toolbar";
|
|
```
|
|
|
|
```tsx
|
|
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<typeof NodeToolbar>',
|
|
},
|
|
}}
|
|
/>
|