<NodeToolbar />

Source on GitHub 

The NodeToolbar component can be used to display a toolbar on a side of a node or display a tooltip for example.

<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 />.

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.