@vue-flow/monorepo • Docs

---

Interface: DefaultEdge<Data, CustomEvents, Type>

Extends

• EdgeLabelOptions

Type Parameters

• Data = ElementData

• CustomEvents extends Record<string, CustomEvent> = any

• Type extends string = string

Properties

animated?

optional animated: boolean

Animated edge

---

ariaLabel?

optional ariaLabel: null | string

---

class?

optional class: string | string[] | Record<string, any> | ClassFunc<GraphEdge<Data, CustomEvents, string>>

Additional class names, can be a string or a callback returning a string (receives current flow element)

---

data?

optional data: Data

Additional data that is passed to your custom components

---

deletable?

optional deletable: boolean

Disable/enable deleting edge

---

domAttributes?

optional domAttributes: Omit<SVGAttributes, "id" | "style" | "className" | "role" | "aria-label" | "onClick" | "onMouseenter" | "onMousemove" | "onMouseleave" | "onContextmenu" | "onDblclick" | "onKeyDown">

General escape hatch for adding custom attributes to the edge's DOM element.

---

events?

optional events: Partial<EdgeEventsHandler<CustomEvents>>

Deprecated

will be removed in the next major version

---

focusable?

optional focusable: boolean

Disable/enable focusing edge (a11y)

---

hidden?

optional hidden: boolean

Is edge hidden

---

id

id: string

Unique edge id

---

interactionWidth?

optional interactionWidth: number

Radius of mouse event triggers (to ease selecting edges), defaults to 2

---

label?

optional label: string | VNode<RendererNode, RendererElement, object> | Component<EdgeTextProps>

An edge label

---

labelBgBorderRadius?

optional labelBgBorderRadius: number

Label Bg border radius

Inherited from

EdgeLabelOptions.labelBgBorderRadius

---

labelBgPadding?

optional labelBgPadding: [number, number]

Label Bg padding

Inherited from

EdgeLabelOptions.labelBgPadding

---

labelBgStyle?

optional labelBgStyle: CSSProperties

Label Bg styles (CSSProperties)

Inherited from

EdgeLabelOptions.labelBgStyle

---

labelShowBg?

optional labelShowBg: boolean

Show label bg

Inherited from

EdgeLabelOptions.labelShowBg

---

labelStyle?

optional labelStyle: CSSProperties

Label styles (CSSProperties)

Inherited from

EdgeLabelOptions.labelStyle

---

markerEnd?

optional markerEnd: EdgeMarkerType

EdgeMarker

---

markerStart?

optional markerStart: EdgeMarkerType

EdgeMarker

---

selectable?

optional selectable: boolean

Disable/enable selecting edge

---

source

source: string

Source node id

---

sourceHandle?

optional sourceHandle: null | string

Source handle id

---

style?

optional style: Styles | StyleFunc<GraphEdge<Data, CustomEvents, string>>

Additional styles, can be an object or a callback returning an object (receives current flow element)

---

target

target: string

Target node id

---

targetHandle?

optional targetHandle: null | string

Target handle id

---

template?

optional template: EdgeComponent

Overwrites current edge type

---

type?

optional type: Type

Edge type, can be a default type or a custom type

---

updatable?

optional updatable: EdgeUpdatable

Disable/enable updating edge

---

zIndex?

optional zIndex: number

Aria label for edge (a11y)