<EdgeToolbar />

Source on GitHub

This component can render a toolbar to one side of a custom edge. This toolbar doesn’t scale with the viewport so that the content doesn’t get too small when zooming out.


import { memo } from 'react';
import { EdgeToolbar, BaseEdge, getBezierPath, type EdgeProps } from '@xyflow/react';
 
function CustomEdge(props: EdgeProps) {
  const [edgePath, centerX, centerY] = getBezierPath(props);
 
  return (
    <>
      <BaseEdge id={props.id} path={edgePath} />
      <EdgeToolbar
        edgeId={props.id}
        x={centerX}
        y={centerY}
        isVisible
      >
        <button>
          some button
        </button>
      </EdgeToolbar>
    </>
  );
}
 
export default memo(CustomEdge);

Props

Name	Type	Default
`...props`	`HTMLAttributes<HTMLDivElement>`

Notes

By default, the toolbar is only visible when the edge is selected. You can override this behavior by setting the isVisible prop to true.