<Controls />

Source on GitHub (opens in a new tab)

The <Controls /> component renders a small panel that contain convenient buttons to zoom in, zoom out, fit the view, and lock the viewport.

import { ReactFlow,  Controls } from '@xyflow/react'
 
export default function Flow() {
  return (
    <ReactFlow nodes={[...]} edges={[...]}>
      <Controls />
    </ReactFlow>
  )
}

Props

For TypeScript users, the props type for the <Controls /> component is exported as ControlsProps.

Name	Type	Default
#`showZoom?`	`boolean` Whether or not to show the zoom in and zoom out buttons. These buttons will adjust the viewport zoom by a fixed amount each press.	`true`
#`showFitView?`	`boolean` Whether or not to show the fit view button. By default this button will adjust the viewport so that all nodes are visible at once.	`true`
#`showInteractive?`	`boolean`	`true`
#`fitViewOptions?`	`FitViewOptions` Customise the options for the fit view button. These are the same options you would pass to the fitView function.
#`onZoomIn?`	`() => void` Called in addition the default zoom behaviour when the zoom in button is clicked.
#`onZoomOut?`	`() => void` Called in addition the default zoom behaviour when the zoom out button is clicked.
#`onFitView?`	`() => void` Called when the fit view button is clicked. When this is not provided, the viewport will be adjusted so that all nodes are visible.
#`onInteractiveChange?`	`(interactiveStatus: boolean) => void` Called when the interactive (lock) button is clicked.
#`position?`	`PanelPosition`	`"bottom-left"`
#`ariaLabel?`	`string`	`"React Flow controls"`
#`orientation?`	`"horizontal" \| "vertical"`	`"vertical"`

Additionally, the <Controls /> component accepts any prop valid on a <div /> element.

Notes

To extend or customise the controls, you can use the <ControlButton /> component