Workflow
Controls
Botões de zoom in / out / fit / lock no canto inferior do Canvas.
Overview
Controls é o conjunto canônico de botões de zoom dentro de
Canvas — Zoom In, Zoom Out, Fit View, Lock. Wrapper
sobre <Controls> do ReactFlow com tokens KDS (rounded, border,
bg-card, hover bg-secondary).
Preview
Botões de zoom in / out / fit / lock.
Usage
<Canvas nodes={nodes} edges={edges}>
<Controls />
</Canvas>Props
Aceita todos os props de
<Controls> do ReactFlow:
| Prop | Tipo | Default | Descrição |
|---|---|---|---|
position | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom-left' | Canto. |
showZoom | boolean | true | Mostra zoom in/out. |
showFitView | boolean | true | Mostra fit-view. |
showInteractive | boolean | true | Mostra lock toggle. |
className | string | KDS aplica radius + border. | Override. |
orientation | 'horizontal' | 'vertical' | 'vertical' | Direção dos botões. |
Subcomponents
Controls é um conjunto fixo — não há slots customizáveis. Os botões internos são:
- Zoom in —
+ - Zoom out —
− - Fit view — Maximize icon
- Lock interactive — Lock/unlock icon
Pra customizar individualmente, use props showZoom/showFitView/showInteractive
ou monte sua própria toolbar via Panel + Buttons.
When to use
- Sempre em workflows interativos. UX padrão — user procura por isso.
When not to use
- Workflow read-only sem zoom — Controls fora de contexto.
- Apps mobile-only (touch devices) — gestos pinch já fazem zoom.
Best practices
- Posição padrão (bottom-left) é o convention da indústria.
- showInteractive=false quando o workflow é read-only.
Accessibility
| Concern | Comportamento |
|---|---|
| Buttons | Todos os botões internos têm aria-label ("zoom in", "zoom out", "fit view", "lock"). |
| Keyboard | Tab navega entre botões; Enter ativa. |