Implementation:FlowiseAI Flowise ButtonEdge

Knowledge Sources	FlowiseAI Flowise
Domains	Canvas, ReactFlow
Last Updated	2026-02-12 07:00 GMT

Overview

ButtonEdge is a custom React Flow edge component that renders a bezier path between two nodes with an interactive delete button positioned at the edge's midpoint.

Description

This component extends the default React Flow edge by computing a bezier path via getBezierPath and placing an SVG foreignObject at the center of the edge that contains a small delete button with an X icon. When the delete button is clicked, the edge is removed from the flow via the flowContext.deleteEdge method and the canvas is marked as dirty via a Redux SET_DIRTY dispatch. The component also supports optional edge labels rendered near the source position using React Flow's EdgeText.

Usage

Use this component as a custom edge type in the React Flow canvas configuration. It is registered as an edge type so that connections between nodes display an interactive delete button, allowing users to visually remove connections.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/views/canvas/ButtonEdge.jsx
• Lines: 1-78

Signature

const ButtonEdge = ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style = {}, data, markerEnd }) => { ... }

export default memo(ButtonEdge)

Import

import ButtonEdge from '@/views/canvas/ButtonEdge'

I/O Contract

Inputs

Name	Type	Required	Description
id	string	Yes	Unique identifier for the edge
sourceX	number	Yes	X coordinate of the source node connection point
sourceY	number	Yes	Y coordinate of the source node connection point
targetX	number	Yes	X coordinate of the target node connection point
targetY	number	Yes	Y coordinate of the target node connection point
sourcePosition	any	Yes	Position of the source handle (e.g., top, bottom, left, right)
targetPosition	any	Yes	Position of the target handle
style	object	No	Optional CSS styles for the edge path (defaults to empty object)
data	object	No	Optional edge data; may contain a label property for edge text
markerEnd	any	No	Optional marker element at the end of the edge

Outputs

Name	Type	Description
Rendered SVG	React Element	An SVG path element with a delete button foreignObject at the midpoint, and optional EdgeText label
Side effects	void	Deletes the edge from the flow context and dispatches SET_DIRTY to Redux on button click

Usage Examples

Basic Usage

import ButtonEdge from '@/views/canvas/ButtonEdge'

// Register as custom edge type in React Flow
const edgeTypes = { buttonedge: ButtonEdge }

<ReactFlow
  edgeTypes={edgeTypes}
  edges={edges}
  nodes={nodes}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Edge_Connection