FlowControls
Zoom in / out / fit-view controls for a flow canvas — real, i18n-labeled buttons.
Category: display · WCAG 2.1-AA · flow, controls, zoom, chrome
Props
| Prop | Type | Default | Description |
|---|---|---|---|
position | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | bottom-left | Position of the component. |
showZoom | boolean | true | When true, shows the zoom-in/zoom-out buttons. |
showFitView | boolean | true | When true, shows the fit-to-view button. |
onZoomIn | () => void | — | Called when the zoom-in control is activated. |
onZoomOut | () => void | — | Called when the zoom-out control is activated. |
onFitView | () => void | — | Called when the fit-to-view control is activated. |
labels | FlowControlsLabels | — | Overrides for the component’s user-visible strings (i18n). |
className | string | — | Additional CSS class names merged onto the root element. |
Design tokens
--cascivo-color-surface--cascivo-color-border--cascivo-target-min-coarse
When to use
- Giving users explicit zoom/fit controls on a flow canvas
When not to use
- When the canvas is static/non-interactive
Examples
Canvas controls
() => (
<div style={{ position: 'relative', height: 200, border: '1px solid var(--cascivo-color-border)' }}>
<FlowControls onZoomIn={() => {}} onZoomOut={() => {}} onFitView={() => {}} />
</div>
)Related components
- FlowCanvas — Calls its viewport actions.
- FlowMiniMap — Complementary navigation chrome.