Button Edge
An edge with a button that can be used to trigger a custom action.
Installation
Make sure to follow the prerequisites before installing the component.
npx shadcn@latest add https://ui-components-git-tooltip-node-refactor-xyflow.vercel.app/button-edgeUsage
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>
);
}