<EdgeLabel />

Source on GitHub

The <EdgeLabel /> component is used in your custom edges to display an edge label that selects the edge when it is clicked.

CustomEdge.svelte


<script lang="ts">
  import { BaseEdge, getBezierPath, type EdgeProps } from '@xyflow/svelte';
 
  let {
    label,
    labelStyle,
    sourceX,
    sourceY,
    sourcePosition,
    targetX,
    targetY,
    targetPosition
  } : EdgeProps = $props();
 
  let [path, labelX, labelY] = $derived(getBezierPath({
    sourceX,
    sourceY,
    targetX,
    targetY,
    sourcePosition,
    targetPosition,
    curvature: pathOptions?.curvature
  }));
</script>
 
<BaseEdge
  {path}
>
 
{#if label}
  <EdgeLabel x={labelX} y={labelY} style={labelStyle}>
    {label}
  </EdgeLabel>
{/if}

Props

The type for props of <EdgeLabel /> component is exported as EdgeLabelProps. Additionally, it extends the props of <div />.

Name	Type	Default
`x`	`number`
`y`	`number`
`width`	`number`
`height`	`number`
`selectEdgeOnClick`	`boolean`
`transparent`	`boolean`
`...props`	`HTMLAttributes<HTMLDivElement>`