Develop

Dialog

Updated: Aug 29, 2026

Overview

Dialogs are modal windows that overlay the current view, used to present critical information, request decisions, or guide users through specific tasks. The Meta VR UI Set SDK provides four dialog types that share one action model and take their width, spacing, colors, and shape from UiSetTheme.

Common features

  • Actions: Each dialog takes a primaryAction plus an optional secondaryAction and tertiaryAction. The first two sit in one row, and the tertiary action sits below it.
  • Dismissal: onDismissRequest fires on an outside click, a back gesture, or a system dismissal. Close the dialog by removing it from the composition.
  • Title row: leading and trailing place a control such as a close button at either end of the title.
  • Theming: Container, banner, choice, and progress colors come from DialogColors. The geometry comes from DialogDimensions.
  • Platform behavior: properties configures the underlying platform dialog. It defaults to a width the SDK controls.

Actions

Describe each action with a DialogAction. Set destructive to give a primary action that deletes data its warning color, and set enabled to false while the action cannot run.
import metavrx.uiset.compose.dialog.DialogAction

val deleteAction = DialogAction(label = "Delete", onClick = { /* ... */ }, destructive = true)
val cancelAction = DialogAction(label = "Cancel", onClick = { /* ... */ })
Label an action with the action itself rather than Yes or No, so the button reads correctly on its own.

Dialog types

Basic dialog (BasicDialog)

  • Usage: The general-purpose confirmation or decision dialog.
  • Content: A title, a description, and one to three actions. Pass thumbnail for edge-to-edge media above the body, and progress for a multi-step flow.
import metavrx.uiset.compose.dialog.BasicDialog
import metavrx.uiset.compose.dialog.DialogProgress

BasicDialog(
    title = "Leave this space",
    description = "Your progress in this session is not saved.",
    primaryAction = DialogAction(label = "Leave", onClick = { /* ... */ }),
    secondaryAction = cancelAction,
    progress = DialogProgress(currentStep = 1, totalSteps = 3),
    onDismissRequest = { /* ... */ },
)

Icon dialog (IconDialog)

  • Usage: A status or confirmation message that a symbol communicates faster than text, such as a completed download.
  • Content: A hero icon centered above the title and description.
import metavrx.uiset.compose.Icon
import metavrx.uiset.compose.dialog.IconDialog
import metavrx.uiset.compose.theme.icons.Icons

IconDialog(
    title = "Download complete",
    description = "Your library is up to date.",
    icon = { Icon(Icons.Regular.CheckCircle, contentDescription = null) },
    primaryAction = DialogAction(label = "Done", onClick = { /* ... */ }),
    onDismissRequest = { /* ... */ },
)

Info dialog (InfoDialog)

  • Usage: A decision that needs a supporting note, such as a permission or billing consequence.
  • Content: An information banner below the body, built from infoIcon and infoText.
import metavrx.uiset.compose.dialog.InfoDialog

InfoDialog(
    title = "Share your microphone",
    description = "This app records audio while you are in a session.",
    infoIcon = { Icon(Icons.Regular.Info, contentDescription = null) },
    infoText = "You can change this later in Settings.",
    primaryAction = DialogAction(label = "Allow", onClick = { /* ... */ }),
    secondaryAction = DialogAction(label = "Not now", onClick = { /* ... */ }),
    onDismissRequest = { /* ... */ },
)

Choice list dialog (ChoiceListDialog)

  • Usage: Selecting one item from a short list before confirming an action.
  • Content: A listHeader above the choices, plus items, selectedItem, and onItemSelected. Each ChoiceListDialogItem carries a title and an optional subtitle, leading icon, and enabled flag. Selection is matched on key, so set it when two items share a title.
import kotlinx.collections.immutable.persistentListOf
import metavrx.uiset.compose.dialog.ChoiceListDialog
import metavrx.uiset.compose.dialog.ChoiceListDialogItem

val devices = persistentListOf(
    ChoiceListDialogItem(title = "Headset speakers"),
    ChoiceListDialogItem(title = "Bluetooth headphones", subtitle = "Connected"),
)
var selectedDevice by remember { mutableStateOf(devices.first()) }

ChoiceListDialog(
    title = "Audio output",
    description = "Choose where sound plays during this session.",
    listHeader = "Available devices",
    items = devices,
    selectedItem = selectedDevice,
    onItemSelected = { selectedDevice = it },
    primaryAction = DialogAction(label = "Confirm", onClick = { /* ... */ }),
    onDismissRequest = { /* ... */ },
)

Common parameters

  • title: String and description: String: The heading and body text.
  • primaryAction: DialogAction: The highest-emphasis action.
  • secondaryAction: DialogAction? and tertiaryAction: DialogAction?: Optional supporting actions.
  • onDismissRequest: () -> Unit: Runs on an outside click, a back gesture, or a system dismissal.
  • leading and trailing: Optional controls at either end of the title row.
  • colors: DialogColors: Container, banner, choice, progress, and disabled colors.
  • dimensions: DialogDimensions: Width, spacing, action, banner, choice, and media geometry.
  • shape: Shape: Dialog container shape.
  • properties: DialogProperties: Platform dialog behavior.
  • modifier: Modifier = Modifier: Applied to the dialog container.
Reserve dialogs for decisions that block the current task, and keep the description to the consequence of each action.
Meta
English (US)
© 2026 Meta