Edge Label

A dedicated label component designed for use on an edge within a diagram. The EdgeLabel component provides a consistent and unified design, following the styling conventions prepared for edges. The state of the label (such as hover, selection, and disabled) is managed externally. Therefore, dedicated props are exposed to reflect these states visually.

The component extends a standard HTMLDivElement, enabling flexibility in layout and positioning. For example, you can use CSS transforms or absolute positioning to control the label's placement on the edge. The content of the label can be any valid ReactNode, allowing full customization.

Note: By default, EdgeLabel uses position: absolute to properly position the label based on the labelX and labelY parameters provided by ReactFlow. This ensures the label appears at the correct location on the edge. When using EdgeLabel outside of a diagram context, keep in mind that it may require additional wrapper elements or layout adjustments, as its absolute positioning removes it from the normal document flow.

function Example() {
  return (
    <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
      <EdgeLabel style={{ position: 'relative' }}>Edge Label</EdgeLabel>
      <EdgeLabel style={{ position: 'relative' }} type="compound">
        <DiamondsFour />
        Edge Label
      </EdgeLabel>
      <EdgeLabel
        style={{ position: 'relative' }}
        type="compound"
        state="selected"
      >
        <DiamondsFour />
        Edge Label
      </EdgeLabel>
      <EdgeLabel
        style={{ position: 'relative' }}
        type="compound"
        state="disabled"
      >
        <DiamondsFour />
        Edge Label
      </EdgeLabel>
      <EdgeLabel style={{ position: 'relative' }} type="icon">
        <DiamondsFour />
      </EdgeLabel>
    </div>
  );
}

Props

isHovered

Typeboolean

size

Type'extra-small' | 'small' | 'medium'

Default'medium'

state

Type'default' | 'selected' | 'disabled' | 'temporary'

Default'default'

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

type

Type'text' | 'icon' | 'compound'

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.

CSS Variables

Radius

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

--ax-public-edge-label-medium-border-radius

--ax-public-edge-label-small-border-radius

Spacing

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

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

--ax-public-edge-label-extra-small-label-padding

--ax-public-edge-label-medium-content-padding

--ax-public-edge-label-medium-icon-padding

--ax-public-edge-label-medium-label-padding

--ax-public-edge-label-small-content-padding

--ax-public-edge-label-small-icon-padding

--ax-public-edge-label-small-label-padding

--ax-public-edge-label-gap

Size

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

--ax-public-edge-label-medium-icon-size

--ax-public-edge-label-small-icon-size

--ax-public-edge-label-border-size

--ax-public-edge-label-border-size-selected

Color

--ax-public-edge-background-color

--ax-public-edge-label-border-color

--ax-public-edge-label-border-color-disabled

--ax-public-edge-label-border-color-hover

--ax-public-edge-label-border-color-selected

--ax-public-edge-label-color

--ax-public-edge-label-color-disabled

Miscellaneous

--ax-public-edge-label-border-style