<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.

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

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
visuallyHiddenLabelReactNodeLikefalse
A localized label which describes the button to screen-reader users Typically it is just a string like "Zoom in"
null
accessibleTextstring | nullfalse
Serves same purpose as `visuallyHiddenLabel` but accepts only string. In the long run, we prefer this over the former.
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
visuallyHiddenLabelReactNodeLikefalse
A localized label which describes the button to screen-reader users Typically it is just a string like "Zoom in"
null
accessibleTextstring | nullfalse
Serves same purpose as `visuallyHiddenLabel` but accepts only string. In the long run, we prefer this over the former.
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
visuallyHiddenLabelReactNodeLikefalse
A localized label which describes the button to screen-reader users Typically it is just a string like "Zoom in"
null
accessibleTextstring | nullfalse
Serves same purpose as `visuallyHiddenLabel` but accepts only string. In the long run, we prefer this over the former.
null

Was this page useful?

Thanks for your feedback!

Feel free to include your name if you wish to have a follow up conversation.


Published: Jan 25, 2022Last updated: Sep 18, 2024