Zoom Controls

styleKeyszoomControls

Develop

100%

<>
  <ZoomControls>
    <ZoomControlsIn visuallyHiddenLabel="Zoom in" />
    <ZoomControlsOut visuallyHiddenLabel="Zoom out" />
    <ZoomControlsValue visuallyHiddenLabel="Current zoom level: ">
      100%
    </ZoomControlsValue>
  </ZoomControls>
</><>
  <ZoomControls>
    <ZoomControlsIn visuallyHiddenLabel="Zoom in" />
    <ZoomControlsOut visuallyHiddenLabel="Zoom out" />
    <ZoomControlsValue visuallyHiddenLabel="Current zoom level: ">
      100%
    </ZoomControlsValue>
  </ZoomControls>
</>

<div class="zoom-controls">
  <button class="zoom-controls-in">
    <span class="visually-hidden">Zoom in</span>
  </button>
  <button class="zoom-controls-out">
    <span class="visually-hidden">Zoom out</span>
  </button>
  <span class="zoom-controls-value">
    <span class="visually-hidden">Current zoom level: </span>
    100%
  </span>
</div>

Note that the visuallyHiddenLabel props are mandatory, and their values must be localized.