<Controls />

Source on GitHub

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


<script lang="ts">
  import { SvelteFlow, Controls } from '@xyflow/svelte';
 
  let nodes = $state.raw([]);
  let edges = $state.raw([]);
</script>
 
<SvelteFlow bind:nodes bind:edges>
  <Controls />
</SvelteFlow>

Props

The type for props of <Controls /> component is exported as ControlsProps. Additionally, it extends the props of <div />.

Name	Type	Default
`position`	`PanelPosition` Position of the controls on the pane
`showZoom`	`boolean` Show button for zoom in/out
`showFitView`	`boolean` Show button for fit view
`showLock`	`boolean` Show button for toggling interactivity
`buttonBgColor`	`string`
`buttonBgColorHover`	`string`
`buttonColor`	`string`
`buttonColorHover`	`string`
`buttonBorderColor`	`string`
`orientation`	`"horizontal" \| "vertical"`
`before`	`Snippet<[]>`
`after`	`Snippet<[]>`
`fitViewOptions`	`FitViewOptionsBase<NodeType>`
`...props`	`HTMLAttributes<HTMLDivElement>`

Notes

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