Edge Labels

Beginner · 2 min read · Updated Nov 6, 2026

Edge Labels: Customize Interactive Edge Text

Edge Labels in React Flow allow developers to display text, information, and interactive elements along connections between nodes. They help make workflow diagrams easier to understand by describing relationships, conditions, actions, and connection purposes.

React Flow supports simple text labels as well as custom HTML elements using EdgeLabelRenderer, giving developers complete control over edge label design and functionality.

1. Adding Basic Edge Labels

The easiest way to add a label to an edge is by using the label property. This allows you to display text directly on a connection between two nodes.

Code Example

import { ReactFlow } from '@xyflow/react';

const edges = [
  {
    id: 'e1-2',
    source: '1',
    target: '2',
    label: 'Next Step',
  },
];

export default function App() {
  return (
    <div style={{ width: '100%', height: '500px' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        fitView
      />
    </div>
  );
}

Basic edge labels are useful for describing workflow steps, node relationships, and connection types.

2. Styling Edge Labels

React Flow allows you to customize edge labels using the labelStyle property. You can control text color, font size, font weight, and other visual properties.

Code Example

const edges = [
  {
    id: 'e1-2',
    source: '1',
    target: '2',
    label: 'Success',
    labelStyle: {
      fill: '#6366f1',
      fontSize: 14,
      fontWeight: 600,
    },
    labelBgStyle: {
      fill: '#eef2ff',
      fillOpacity: 1,
    },
    labelBgPadding: [8, 4],
    labelBgBorderRadius: 6,
  },
];

Styled labels improve diagram readability and help distinguish different workflow conditions.

3. Positioning Edge Labels

React Flow provides automatic label positioning for built-in edge types. You can also control label placement by using custom edge components and calculating coordinates along the edge path.

Code Example

import {
  BaseEdge,
  EdgeLabelRenderer,
  getBezierPath,
} from '@xyflow/react';

export function CustomLabelEdge(props) {
  const {
    id,
    sourceX,
    sourceY,
    targetX,
    targetY,
  } = props;

  const [edgePath, labelX, labelY] = getBezierPath({
    sourceX,
    sourceY,
    targetX,
    targetY,
  });

  return (
    <>
      <BaseEdge id={id} path={edgePath} />

      <EdgeLabelRenderer>
        <div
          style={{
            position: 'absolute',
            transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
            pointerEvents: 'all',
          }}
          className="nodrag nopan"
        >
          Custom Label
        </div>
      </EdgeLabelRenderer>
    </>
  );
}

This approach allows you to position labels precisely along custom edge paths.

4. Adding HTML Elements to Edge Labels

The EdgeLabelRenderer component allows developers to render custom HTML elements on top of SVG edges. You can use it to add buttons, badges, icons, tooltips, and other interactive UI elements.

Code Example

import {
  BaseEdge,
  EdgeLabelRenderer,
  getBezierPath,
} from '@xyflow/react';

export function InteractiveLabelEdge(props) {
  const {
    id,
    sourceX,
    sourceY,
    targetX,
    targetY,
    data,
  } = props;

  const [edgePath, labelX, labelY] = getBezierPath({
    sourceX,
    sourceY,
    targetX,
    targetY,
  });

  return (
    <>
      <BaseEdge id={id} path={edgePath} />

      <EdgeLabelRenderer>
        <button
          className="nodrag nopan"
          style={{
            position: 'absolute',
            transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
            pointerEvents: 'all',
          }}
          onClick={() => data?.onClick?.(id)}
        >
          View Details
        </button>
      </EdgeLabelRenderer>
    </>
  );
}

Interactive edge labels are useful for workflow actions, connection settings, and contextual controls.

5. Creating Conditional Edge Labels

You can use dynamic edge data to display different labels based on workflow conditions. This is especially useful for decision trees, automation builders, and conditional workflows.

Code Example

const edges = [
  {
    id: 'e1-2',
    source: '1',
    target: '2',
    label: 'Yes',
    style: {
      stroke: '#22c55e',
    },
    labelStyle: {
      fill: '#16a34a',
      fontWeight: 600,
    },
  },
  {
    id: 'e1-3',
    source: '1',
    target: '3',
    label: 'No',
    style: {
      stroke: '#ef4444',
    },
    labelStyle: {
      fill: '#dc2626',
      fontWeight: 600,
    },
  },
];

Conditional labels make it easier to understand branching logic and visualize different workflow outcomes.

6. Building Custom Edge Label Badges

You can create badge-style edge labels using HTML and CSS. These labels are useful for displaying statuses, categories, connection types, and workflow conditions.

Code Example

<EdgeLabelRenderer>
  <div
    className="edge-badge nodrag nopan"
    style={{
      position: 'absolute',
      transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
      pointerEvents: 'all',
    }}
  >
    Active
  </div>
</EdgeLabelRenderer>

.edge-badge {
  padding: 4px 10px;
  background: #dcfce7;
  color: #15803d;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #86efac;
}

This technique helps create visually consistent labels for professional workflow editors.

Edge LabelsOpen in New Tab

Previous← Theming Next guideOverview →