NOTE: This version of the documentation tracks unstable development happening on A-Frame’s master branch. If you wish to try it out, grab the unstable build. Otherwise, head to the documentation for the current 1.6.0 version

The xr-mode-ui component configures or disables the enter VR and AR buttons. Buttons only display if the browser supports the corresponding modes (AR or VR). The xr-mode-ui component applies only to the <a-scene> element. If we wish to simply toggle the UI, use CSS instead.


<a-scene xr-mode-ui="enabled: false"></a-scene>


Property Description Default Value
cardboardModeEnabled Enables the now deprecated cardboard mode. false
enabled Whether or not to display UI related to entering VR. true
enterVRButton Selector to a custom VR button. On click, the button will enter VR. ‘’
enterVREnabled If the VR button is displayed when applicable. true
enterARButton Selector to a custom AR button. On click, the button will enter AR. ‘’
enterAREnabled If the AR button is displayed when applicable. true
XRMode If the AR button, VR button, or both buttons will be displayed. vr

Specifying Custom Enter VR and AR Buttons

xr-mode-ui="enterVRButton: #myEnterVRButton; enterARButton: #myEnterARButton; XRMode: xr;">
<!-- Style the button with images and/or custom CSS. -->
<a id="myEnterVRButton" href="#"></a>
<a id="myEnterARButton" href="#"></a>