<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.

<script lang="ts">
  import { writable } from 'svelte/store';
  import { SvelteFlow, Controls } from '@xyflow/svelte';
 
  const nodes = writable([]);
  const edges = writable([]);
</script>
 
<SvelteFlow nodes={nodes} edges={edges}>
  <Controls />
</SvelteFlow>

Props

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

Name	Type	Default
#`position?`	`PanelPosition`	`"bottom-left"`
#`showZoom?`	`boolean`	`true`
#`showFitView?`	`boolean`	`true`
#`showLock?`	`boolean`	`true`
#`fitViewOptions?`	`FitViewOptions`
#`buttonBgColor?`	`string`	`undefined`
#`buttonBgColorHover?`	`string`	`undefined`
#`buttonColor?`	`string`	`undefined`
#`buttonColorHover?`	`string`	`undefined`
#`style?`	`string`	`undefined`
#`class?`	`string`	`undefined`
#`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