Edge

The edge building blocks give diagram edges a consistent look. EdgeLabel is a label primitive designed to sit on an edge, while the useEdgeStyle hook computes the stroke styles for the edge path itself. Both follow the styling conventions prepared for edges, so a custom edge type matches the built-in ones.

EdgeLabel provides a unified label design for text, icons, or compound content. Its state (hover, selection, disabled) is managed externally and reflected through props. It extends a standard HTMLDivElement and, by default, uses position: absolute so it can be placed at the labelX / labelY coordinates that React Flow provides. Used outside a diagram context it may need extra wrapper elements or layout adjustments because absolute positioning removes it from normal document flow.

useEdgeStyle returns an object of CSS properties (stroke, strokeWidth, transition) that you apply directly to the SVG path element representing an edge. The package also exports the EdgeState and EdgeLabelSize types and the EDGE_LABEL_SIZES constant.

Usage

EdgeLabel is rendered through xyflow’s <EdgeLabelRenderer> and positioned with a transform, while useEdgeStyle feeds the edge path. The example mirrors the SDK’s default labeled edge.

import { EdgeLabel, type EdgeState, useEdgeStyle } from '@workflowbuilder/ui';
import { BaseEdge, EdgeLabelRenderer, type EdgeProps, getSmoothStepPath } from '@xyflow/react';
import { useState } from 'react';

function LabeledEdge({
  id,
  sourceX,
  sourceY,
  targetX,
  targetY,
  sourcePosition,
  targetPosition,
  data,
  selected,
}: EdgeProps) {
  const [hovered, setHovered] = useState(false);
  const state: EdgeState = selected ? 'selected' : 'default';

  const pathStyle = useEdgeStyle({ state, isHovered: hovered });

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

  return (
    <>
      <BaseEdge id={id} path={edgePath} style={pathStyle} />
      {data?.label && (
        <EdgeLabelRenderer>
          <EdgeLabel
            isHovered={hovered}
            state={state}
            style={{ transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)` }}
            onMouseEnter={() => setHovered(true)}
            onMouseLeave={() => setHovered(false)}
          >
            {data.label}
          </EdgeLabel>
        </EdgeLabelRenderer>
      )}
    </>
  );
}

EdgeLabel props

EdgeLabel also forwards any remaining HTMLDivElement attributes (e.g. style, onMouseEnter, data-*).

isHovered

Typeboolean

size

TypeEdgeLabelSize

Default'medium'

state

TypeEdgeState

Default'default'

The visual state of the edge. Determines base styles like `strokeWidth`.

type

TypeEdgeLabelType

Default'text'

Determines the layout style for the EdgeLabel based on its content: text: Simple text label. icon: Single icon without additional content. compound: Mixed content like icons + text, multiple icons, etc.

useEdgeStyle

A hook that maps an edge’s state and hover flag to the CSS properties for its SVG path.

isHovered

Typeboolean

Whether the edge is currently hovered. When true, applies hover color on top of the state styles.

state

TypeEdgeState

The visual state of the edge. Determines base styles like `strokeWidth`.

Returns { stroke, strokeWidth, transition } ready to spread onto a path’s style.

CSS variables

Color

--wb-public-edge-background-color

--wb-public-edge-label-color

--wb-public-edge-label-border-color

--wb-public-edge-label-border-color-selected

--wb-public-edge-label-border-color-hover

--wb-public-edge-label-color-disabled

--wb-public-edge-label-border-color-disabled

--wb-public-edge-color-disabled

--wb-public-edge-color-select

--wb-public-edge-color-hover

--wb-public-edge-color

Size

--wb-public-edge-label-medium-label-padding

--wb-public-edge-label-small-label-padding

--wb-public-edge-label-extra-small-label-padding

--wb-public-edge-label-medium-icon-padding

--wb-public-edge-label-small-icon-padding

--wb-public-edge-label-extra-small-icon-padding

--wb-public-edge-label-medium-content-padding

--wb-public-edge-label-small-content-padding

--wb-public-edge-label-extra-small-content-padding

--wb-public-edge-label-medium-border-radius

--wb-public-edge-label-small-border-radius

--wb-public-edge-label-extra-small-border-radius

--wb-public-edge-label-medium-icon-size

--wb-public-edge-label-small-icon-size

--wb-public-edge-label-extra-small-icon-size

--wb-public-edge-label-gap

--wb-public-edge-label-border-size

--wb-public-edge-label-border-size-selected

--wb-public-edge-label-border-style

--wb-public-edge-stroke-width-select

--wb-public-edge-stroke-width