Primitive

Diagram Controls

Compact zoom and viewport controls for diagram surfaces.

Use DiagramControls inside diagram footers and compact graph headers. The primitive owns button anatomy and density; the owning component owns zoom math, panning state, and reset behavior.
control
DOM renderImage render
Diagram ControlsDefault

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Diagram viewport controls with percentage readout.
Render state

Disabled

Disabled diagram zoom controls.
Render state

Compact

Compact zoom controls with a scale label.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
zoomnumber1Current zoom value displayed as a percentage.
zoomLabel *ReactNode-Optional custom readout for non-percent diagram scales.
disabledbooleanfalseWhether zoom buttons should be disabled.
onZoomIn *() => void-Zoom-in callback.
onZoomOut *() => void-Zoom-out callback.
onReset *() => void-Viewport reset callback.