62_button_edge

Button Edge

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

UI Component: button-edge

index.tsx

import { type ReactNode } from "react";
 
import {
  BaseEdge,
  EdgeLabelRenderer,
  getBezierPath,
  type EdgeProps,
} from "@xyflow/react";
 
export function ButtonEdge({
  sourceX,
  sourceY,
  targetX,
  targetY,
  sourcePosition,
  targetPosition,
  style = {},
  markerEnd,
  children,
}: EdgeProps & { children: ReactNode }) {
  const [edgePath, labelX, labelY] = getBezierPath({
    sourceX,
    sourceY,
    sourcePosition,
    targetX,
    targetY,
    targetPosition,
  });
 
  return (
    <>
      <BaseEdge path={edgePath} markerEnd={markerEnd} style={style} />
      <EdgeLabelRenderer>
        <div
          className="nodrag nopan pointer-events-auto absolute"
          style={{
            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
          }}
        >
          {children}
        </div>
      </EdgeLabelRenderer>
    </>
  );
}

component-example.tsx

import { EdgeProps } from "@xyflow/react";
import { memo } from "react";
 
import { Button } from "@/components/ui/button";
import { MousePointerClick } from "lucide-react";
import { ButtonEdge } from "@/registry/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>
  );
});
 
ButtonEdgeDemo.displayName = "ButtonEdgeDemo";
 
export default ButtonEdgeDemo;