<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 to true.