Skip to Content
✨ Svelte Flow 1.0 is here! Rewritten for Svelte 5 with many new features and improvements.
ReferenceComponents<EdgeLabel />

<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 />.

NameTypeDefault
xnumber
ynumber
widthnumber
heightnumber
selectEdgeOnClickboolean
transparentboolean
...propsHTMLAttributes<HTMLDivElement>
Last updated on