<NodeToolbar />
The NodeToolbar component can be used to display a toolbar on a side of a node or display a tooltip for example.
CustomNode.svelte
<script lang="ts">
import { NodeToolbar, Handle, Position, type NodeProps } from '@xyflow/svelte';
let { data } : NodeProps = $props();
</script>
<NodeToolbar>
<button>delete</button>
<button>copy</button>
<button>expand</button>
</NodeToolbar>
<div>{data.label}</div>
<Handle type="target" position={Position.Left} />
<Handle type="source" position={Position.Right} />
Props
The type for props of <NodeToolbar />
component is exported as NodeToolbarProps
. Additionally, it extends the props of <div />
.
Name | Type | Default |
---|---|---|
nodeId | string | string[] The id of the node, or array of ids the toolbar should be displayed at | |
position | Position Position of the toolbar relative to the node | |
align | Align Align the toolbar relative to the node | |
offset | number Offset the toolbar from the node | |
isVisible | boolean If true, node toolbar is visible even if node is not selected | |
...props | HTMLAttributes<HTMLDivElement> |
Notes
- By default, the toolbar is only visible when a node is selected. If multiple
nodes are selected it will not be visible to prevent overlapping toolbars or
clutter. You can override this behavior by setting the
isVisible
prop totrue
.
Last updated on