<ControlButton />

Source on GitHub (opens in a new tab)

You can add buttons to the control panel by using the <ControlButton /> component and pass it as a child to the <Controls /> component.

import { MagicWand } from '@radix-ui/react-icons'
import { ReactFlow,  Controls, ControlButton } from '@xyflow/react'
 
export default function Flow() {
  return (
    <ReactFlow nodes={[...]} edges={[...]}>
      <Controls>
        <ControlButton onClick={() => alert('Something magical just happened. ✨')}>
          <MagicWand />
        </ControlButton>
      </Controls>
    </ReactFlow>
  )
}

Props

The <ControlButton /> component accepts any prop valid on a HTML <button /> element.