<Controls />

Source on GitHub

The <Controls /> component renders a small panel that contains 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 ControlProps.

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` Show button for toggling interactivity	`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 behavior when the zoom in button is clicked.
`onZoomOut`	`() => void` Called in addition the default zoom behavior 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` Position of the controls on the pane	`PanelPosition.BottomLeft`
`children`	`ReactNode`
`style`	`CSSProperties` Style applied to container
`className`	`string` Class name applied to container
`aria-label`	`string`	`'React Flow controls'`
`orientation`	`"horizontal" \| "vertical"`	`'vertical'`

Notes

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