<NodeToolbar />

Source on GitHub

This component can render a toolbar or tooltip to one side of a custom node. This toolbar doesn’t scale with the viewport so that the content is always visible.


import { memo } from 'react';
import { Handle, Position, NodeToolbar } from '@xyflow/react';
 
export CustomNode = ({ data }) => {
  return (
    <>
      <NodeToolbar isVisible={data.toolbarVisible} position={data.toolbarPosition}>
        <button>delete</button>
        <button>copy</button>
        <button>expand</button>
      </NodeToolbar>
 
      <div style={{ padding: '10px 20px' }}>
        {data.label}
      </div>
 
      <Handle type="target" position={Position.Left} />
      <Handle type="source" position={Position.Right} />
    </>
  );
};
 
export default memo(CustomNode);

Props

For TypeScript users, the props type for the <NodeToolbar /> component is exported as NodeToolbarProps.

Name	Type	Default
#`nodeId?`	`string \| string[]` By passing in an array of node id's you can render a single tooltip for a group or collection of nodes.
#`isVisible?`	`boolean`
#`position?`	`Position`
#`offset?`	`number` The space between the node and the toolbar, measured in pixels.	`10`
#`align?`	`"center" \| "start" \| "end"`

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.