Skip to main content

<EdgeText />

You can use the EdgeText as a helper component to display text within your custom edges.

import { EdgeText } from '@react-flow/core';

<EdgeText
  x={100}
  y={100}
  label="a label"
  labelStyle={{ fill: 'white' }}
  labelShowBg
  labelBgStyle={{ fill: 'red' }}
  labelBgPadding={[2, 4]}
  labelBgBorderRadius={2}
/>;

Prop Types​

label​

Description:
The text or label to render along an edge.
Type:
string | ReactNode

labelStyle?​

Description:
Custom styles to apply to the label.
Type:
CSSProperties
Default:
{}

labelBgStyle?​

Description:
Custom styles to apply to the background of the label.
Type:
CSSProperties
Default:
{}

labelShowBg?​

Description:
Toggles whether to render the label's background or not.
Type:
boolean
Default:
true

labelBgPadding?​

Description:
The amount of horizontal and vertical padding to apply to the label background, in pixels.
Type:
[number, number]
Default:
[2, 4]

labelBgBorderRadius?​

Description:
The border radius to apply to the label background, in pixels.
Type:
number
Default:
2

x​

Description:
The x position where the label should be rendered.
Type:
number

y​

Description:
The y position where the label should be rendered.
Type:
number

TypeScript​

The interface of the EdgeText props is exported as EdgeTextProps. Besides the documented props, you can also pass any standard React HTML attributes such as onClick, className and so on.