<EdgeToolbar />

The EdgeToolbar component can be used to display a toolbar on a side of the passed x and y coordinates.

CustomEdge.svelte


<script lang="ts">
	import { EdgeToolbar, getBezierPath, BaseEdge, type EdgeProps } from '@xyflow/svelte';
 
	let { id, sourceX, sourceY, targetX, targetY }: EdgeProps = $props();
 
	let [edgePath, centerX, centerY] = $derived(
		getBezierPath({
			sourceX,
			sourceY,
			targetX,
			targetY
		})
	);
</script>
 
<BaseEdge {id} path={edgePath} />
<EdgeToolbar edgeId={id} x={centerX} y={centerY} isVisible>
	<button>some button</button>
</EdgeToolbar>

Props

Name	Type	Default
`edgeId`	`string` An edge toolbar must be attached to an edge.
`x`	`number` The `x` position of the edge label.
`y`	`number` The `y` position of the edge label.
`isVisible`	`boolean` If `true`, edge toolbar is visible even if edge is not selected.	`false`
`alignX`	`"left" \| "center" \| "right"` Align the vertical toolbar position relative to the passed x position.	`"center"`
`alignY`	`"center" \| "top" \| "bottom"` Align the horizontal toolbar position relative to the passed y position.	`"center"`
`...props`	`HTMLAttributes<HTMLDivElement>`

Notes

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