Skip to Content
✨ Svelte Flow 1.0 is here! Rewritten for Svelte 5 with many new features and improvements.
ReferenceComponents<NodeToolbar />

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

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

NameTypeDefault
nodeIdstring | string[]

The id of the node, or array of ids the toolbar should be displayed at

positionPosition

Position of the toolbar relative to the node

alignAlign

Align the toolbar relative to the node

offsetnumber

Offset the toolbar from the node

isVisibleboolean

If true, node toolbar is visible even if node is not selected

...propsHTMLAttributes<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.
Last updated on