Button Edge

An edge with a button that can be used to trigger a custom action.

Dependencies:

@xyflow/react lucide-react shadcn/ui/button

Installation

Make sure to follow the prerequisites before installing the component.


npx shadcn@latest add https://ui.reactflow.dev/button-edge


pnpm dlx shadcn@latest add https://ui.reactflow.dev/button-edge


yarn dlx shadcn@latest add https://ui.reactflow.dev/button-edge


bun x shadcn@latest add https://ui.reactflow.dev/button-edge

Usage

1. Copy the component into your app


import { EdgeProps } from "@xyflow/react";
import { memo } from "react";
 
import { Button } from "@/components/ui/button";
import { MousePointerClick } from "lucide-react";
import { ButtonEdge } from "@/components/button-edge";
 
const ButtonEdgeDemo = memo((props: EdgeProps) => {
  const onEdgeClick = () => {
    window.alert(`Edge has been clicked!`);
  };
 
  return (
    <ButtonEdge {...props}>
      <Button onClick={onEdgeClick} size="icon" variant="secondary">
        <MousePointerClick size={16} />
      </Button>
    </ButtonEdge>
  );
});
 
export default ButtonEdgeDemo;

2. Connect the component with your React Flow application.


import { Background, ReactFlow } from "@xyflow/react";
import ButtonEdgeDemo from "./component-example";
 
const defaultNodes = [
  {
    id: "1",
    position: { x: 200, y: 200 },
    data: { label: "Node" },
  },
  {
    id: "2",
    position: { x: 500, y: 500 },
    data: { label: "Node" },
  },
];
 
const defaultEdges = [
  {
    id: "e1-2",
    source: "1",
    target: "2",
    type: "buttonedge",
  },
];
 
const edgeTypes = {
  buttonedge: ButtonEdgeDemo,
};
 
export default function App() {
  return (
    <div className="h-full w-full">
      <ReactFlow
        defaultNodes={defaultNodes}
        defaultEdges={defaultEdges}
        edgeTypes={edgeTypes}
        fitView
      >
        <Background />
      </ReactFlow>
    </div>
  );
}