<ControlButton />

<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 'reactflow'
export default function Flow() {
  return (
    <ReactFlow nodes={[...]} edges={[...]}>
        <ControlButton onClick={() => alert('Something magical just happened. ✨')}>
          <MagicWand />


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