Spatial dialogs

Applicable XR devices
This guidance helps you build experiences for these types of XR devices.
Learn about XR device types →
XR Headsets
Wired XR Glasses
Learn about XR device types →

A SpatialDialog is a spatialized component that appears on top of the content at the base elevation level.

Show a spatial dialog

The following example shows a spatial dialog that opens after a short delay. When SpatialDialog is used, the dialog appears at the same z-depth as the spatial panel, and the panel is pushed back by 125dp when spatialization is enabled. SpatialDialog can also be used when spatialization isn't enabled, in which case SpatialDialog falls back to its 2D counterpart, Dialog.

@Composable
fun DelayedDialog() {
    var showDialog by remember { mutableStateOf(false) }
    LaunchedEffect(Unit) {
        delay(3000.milliseconds)
        showDialog = true
    }
    if (showDialog) {
        SpatialDialog(
            onDismissRequest = { showDialog = false },
            SpatialDialogProperties(
                dismissOnBackPress = true
            )
        ) {
            Box(
                Modifier
                    .height(150.dp)
                    .width(150.dp)
            ) {
                Button(onClick = { showDialog = false }) {
                    Text("OK")
                }
            }
        }
    }
}

Key points about the code