<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, type NodeProps, Handle, Position } from '@xyflow/svelte';
 
	type $$Props = NodeProps;
 
	export let data: $$Props['data'];
</script>
 
<NodeToolbar>
	<button>delete</button>
	<button>copy</button>
	<button>expand</button>
</NodeToolbar>
<div class="node">
	<div>{data.label}</div>
	<Handle type="target" position={Position.Left} />
	<Handle type="source" position={Position.Right} />
</div>

Props

Name	Type
#`nodeId?`	`string \| string[]`
#`position?`	`Position`
#`align?`	`Align`
#`offset?`	`number`
#`isVisible?`	`number`

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.