Dialog

fun Dialog(state: DialogState, properties: DialogProperties = DialogProperties(), onDismiss: () -> Unit = DoNothing, content: @Composable DialogScope.() -> Unit)

A stackable, renderless, highly performant foundational component to build dialogs with.

For interactive preview & code examples, visit Dialog Documentation.

Basic Example

val dialogState = rememberDialogState()

Box {
Button(onClick = { dialogState.visible = true }) {
Text("Show Dialog")
}
Dialog(state = dialogState) {
DialogPanel(
modifier = Modifier
.displayCutoutPadding()
.systemBarsPadding()
.widthIn(min = 280.dp, max = 560.dp)
.padding(20.dp)
.clip(RoundedCornerShape(12.dp))
.border(1.dp, Color(0xFFE4E4E4), RoundedCornerShape(12.dp))
.background(Color.White)
) {
Column {
Text("Something important happened")
Button(onClick = { dialogState.visible = false }) {
Text("Got it")
}
}
}
}
}

Parameters

state

The DialogState that controls the visibility of the dialog.

properties

The DialogProperties that configure the behavior of the dialog.

onDismiss

Callback that is called when the dialog is dismissed.

content

The content of the dialog, which should contain a DialogPanel and optionally a Scrim.