<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Zoom Controls

Zoom in and out of the current view.
styleKeys: zoomControls

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

The preview has been updated.

Disabled

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

The preview has been updated.

Accessibility

If you’re not using SWAN’s i18n system, ZoomControls requires you to set some accessibility props for a11y compliance:

  • The accessibleText prop is required on sub components ZoomControlsIn, ZoomControlsOut and ZoomControlsValue. These should be set to localized text that describes the button to the user e.g. "Zoom in", "Zoom out" and some text for the current zoom value "Current zoom level: 100%" respectively.

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.
proptyperequireddescriptiondefault
visuallyHiddenLabelReactNodefalse
⚠️ 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
accessibleTextstring | nullfalse
⚠️ 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
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.
proptyperequireddescriptiondefault
visuallyHiddenLabelReactNodefalse
⚠️ 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
accessibleTextstring | nullfalse
⚠️ 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.
proptyperequireddescriptiondefault
visuallyHiddenLabelReactNodefalse
⚠️ 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
accessibleTextstring | nullfalse
⚠️ 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
valuenumberfalse
The zoom value to display (typically a percentage, e.g. "100" for 100%)
null