<EdgeLabel />
Source on GitHub (opens in a new tab)
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 { getBezierPath, type EdgeProps } from '@xyflow/svelte';
 
  type $$Props = EdgeProps;
 
  export let id: $$Props['id'] = undefined;
  export let label: $$Props['label'] = undefined;
  export let labelStyle: $$Props['labelStyle'] = undefined;
 
  export let sourceX: $$Props['sourceX'];
  export let sourceY: $$Props['sourceY'];
  export let sourcePosition: $$Props['sourcePosition'];
 
  export let targetX: $$Props['targetX'];
  export let targetY: $$Props['targetY'];
  export let targetPosition: $$Props['targetPosition'];
 
  $: [path, labelX, labelY] = getBezierPath({
    sourceX,
    sourceY,
    targetX,
    targetY,
    sourcePosition,
    targetPosition,
    curvature: pathOptions?.curvature
  });
</script>
 
<path
  {id}
  d={path}
  fill="none"
/>
 
{#if label}
  <EdgeLabel x={labelX} y={labelY} style={labelStyle}>
    {label}
  </EdgeLabel>
{/if}Props
| Name | Type | 
|---|---|
# style? | string | 
# x? | number | 
# y? | number |