Zoom Controls

Zoom in and out of the current view.

styleKey: zoomControls

Passing zoom value via children is deprecated in SWAN v3.24

Always use the explicit value prop. The component uses this value to generate accessible announcements via SWAN's i18n system.

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

See core props for additional props that can be applied to each of these components. Each component also accepts the React-equivalent native HTML attributes of the element it renders, unless a listed prop replaces one or a note says otherwise.

ZoomControls

Renders <div>. No props beyond core props and native HTML attributes.

ZoomControlsIn

Renders <button>.

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

ZoomControlsOut

Renders <button>.

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

ZoomControlsValue

Renders <span>.

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