Zoom Controls

Zoom in and out of the current view.

styleKeys: zoomControls

UsageAPI

Zoom Controls provide buttons to let the user zoom in and out of the current view, as well as show the current level of zoom.

Usage

ReactVanilla

<ZoomControls>
  <ZoomControlsIn />
  <ZoomControlsOut />
  <ZoomControlsValue value={100} />
</ZoomControls>

<ZoomControls>
  <ZoomControlsIn />
  <ZoomControlsOut />
  <ZoomControlsValue value={100} />
</ZoomControls>

<div class="swan-zoom-controls">
  <button class="swan-zoom-controls-in" aria-controls="zoom-control">
    <span class="swan-sr-only">Zoom in</span>
  </button>
  <button class="swan-zoom-controls-out" aria-controls="zoom-control">
    <span class="swan-sr-only">Zoom out</span>
  </button>
  <span class="swan-zoom-controls-value" id="zoom-control">
    <span class="swan-sr-only">Current zoom level is </span>
    100%
  </span>
</div>

<div class="swan-zoom-controls">
  <button class="swan-zoom-controls-in" aria-controls="zoom-control">
    <span class="swan-sr-only">Zoom in</span>
  </button>
  <button class="swan-zoom-controls-out" aria-controls="zoom-control">
    <span class="swan-sr-only">Zoom out</span>
  </button>
  <span class="swan-zoom-controls-value" id="zoom-control">
    <span class="swan-sr-only">Current zoom level is </span>
    100%
  </span>
</div>

Disabled

Use disabled on Zoom Control button when its action is at its boundary (e.g., max or min zoom)

ReactVanilla

<ZoomControls>
  <ZoomControlsIn disabled />
  <ZoomControlsOut />
  <ZoomControlsValue value={100} />
</ZoomControls>

<ZoomControls>
  <ZoomControlsIn disabled />
  <ZoomControlsOut />
  <ZoomControlsValue value={100} />
</ZoomControls>

<div class="swan-zoom-controls">
  <button class="swan-zoom-controls-in" aria-controls="zoom-control">
    <span class="swan-sr-only">Zoom in</span>
  </button>
  <button class="swan-zoom-controls-out" aria-controls="zoom-control">
    <span class="swan-sr-only">Zoom out</span>
  </button>
  <span class="swan-zoom-controls-value" id="zoom-control">
    <span class="swan-sr-only">Current zoom level is </span>
    100%
  </span>
</div>

<div class="swan-zoom-controls">
  <button class="swan-zoom-controls-in" aria-controls="zoom-control">
    <span class="swan-sr-only">Zoom in</span>
  </button>
  <button class="swan-zoom-controls-out" aria-controls="zoom-control">
    <span class="swan-sr-only">Zoom out</span>
  </button>
  <span class="swan-zoom-controls-value" id="zoom-control">
    <span class="swan-sr-only">Current zoom level is </span>
    100%
  </span>
</div>

Props

ZoomControlsIn

This component is implemented using the <button /> as the root element. You can utilize the native attributes supported by <button /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

prop	type	required	description	default
visuallyHiddenLabel	`ReactNode`	false	⚠️ Deprecated - This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system for continued support. A localized label which describes the button to screen-reader users Typically it is just a string like "Zoom in"	null
accessibleText	`string \| null`	false	⚠️ Deprecated - This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system for continued support. A localized label which describes the button to screen-reader users Typically it is just a string like "Zoom in"	null

ZoomControls

This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

ZoomControlsOut

See core props for additional props that can be applied to this component.

prop	type	required	description	default
visuallyHiddenLabel	`ReactNode`	false	⚠️ Deprecated - This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system for continued support. A localized label which describes the button to screen-reader users Typically it is just a string like "Zoom out"	null
accessibleText	`string \| null`	false	⚠️ Deprecated - This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system for continued support. A localized label which describes the button to screen-reader users Typically it is just a string like "Zoom out"	null

ZoomControlsValue

This component is implemented using the <span /> as the root element. You can utilize the native attributes supported by <span /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

prop	type	required	description	default
visuallyHiddenLabel	`ReactNode`	false	⚠️ Deprecated - This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system for continued support. A localized label which describes the component to screen-reader users Typically it is just a string like "Current zoom level"	null
accessibleText	`string \| null`	false	⚠️ Deprecated - This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system for continued support. A localized label which describes the component to screen-reader users Typically it is just a string representing the zoom value "Current zoom level"	null
value	`number`	false	The zoom value to display (typically a percentage, e.g. "100" for 100%)	null

Internationalization

SWAN's Internationalization System allows SWAN components to render with fully translated and accessible text out-of-the-box. The following keys are provided to allow you to override the default translation.

Default Text	Key
Zoom in	`zoom-controls-in.accessible-text-for-zoom-in`
Zoom out	`zoom-controls-out.accessible-text-for-zoom-out`
Current zoom level is {{value}}	`zoom-controls-value.accessible-text-for-zoom-value`