<ControlButton />

你可以使用 <ControlButton /> 组件向控制面板添加按钮，并将其作为子元素传递给 <Controls /> 组件。

🌐 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

<ControlButton /> 组件接受 HTML <button /> 元素上有效的任何属性。

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

Name	Type	Default
`...props`	`ButtonHTMLAttributes<HTMLButtonElement>`