AlertDialog

AlertDialogs provide important prompts in a user flow. They can require an action, communicate

AlertDialog

AlertDialogs provide important prompts in a user flow. They can require an action, communicate information, or help users accomplish a task. The AlertDialog is scrollable by default if the content exceeds the viewport height.

@Composable
public fun AlertDialog(
    visible: Boolean,
    onDismissRequest: () -> Unit,
    confirmButton: @Composable RowScope.() -> Unit,
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    dismissButton: @Composable RowScope.() -> Unit = {
        AlertDialogDefaults.DismissButton(onDismissRequest)
    },
    icon: @Composable (() -> Unit)? = null,
    text: @Composable (() -> Unit)? = null,
    verticalArrangement: Arrangement.Vertical = AlertDialogDefaults.VerticalArrangement,
    contentPadding: PaddingValues =
        if (icon != null) {
            AlertDialogDefaults.confirmDismissWithIconContentPadding()
        } else {
            AlertDialogDefaults.confirmDismissContentPadding()
        },
    properties: DialogProperties = DialogProperties(),
    content: (ScalingLazyListScope.() -> Unit)? = null,
)

Parameters

@Composable
public fun AlertDialog(
    visible: Boolean,
    onDismissRequest: () -> Unit,
    confirmButton: @Composable RowScope.() -> Unit,
    title: @Composable () -> Unit,
    transformationSpec: TransformationSpec,
    modifier: Modifier = Modifier,
    dismissButton: @Composable RowScope.() -> Unit = {
        AlertDialogDefaults.DismissButton(onDismissRequest)
    },
    icon: @Composable (() -> Unit)? = null,
    text: @Composable (() -> Unit)? = null,
    verticalArrangement: Arrangement.Vertical = AlertDialogDefaults.VerticalArrangement,
    contentPadding: PaddingValues =
        if (icon != null) {
            AlertDialogDefaults.confirmDismissWithIconContentPadding()
        } else {
            AlertDialogDefaults.confirmDismissContentPadding()
        },
    properties: DialogProperties = DialogProperties(),
    content: (TransformingLazyColumnScope.() -> Unit)? = null,
)

Parameters

@Composable
public fun AlertDialog(
    visible: Boolean,
    onDismissRequest: () -> Unit,
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    icon: @Composable (() -> Unit)? = null,
    text: @Composable (() -> Unit)? = null,
    verticalArrangement: Arrangement.Vertical = AlertDialogDefaults.VerticalArrangement,
    contentPadding: PaddingValues =
        if (icon != null) {
            AlertDialogDefaults.contentWithIconPadding()
        } else {
            AlertDialogDefaults.contentPadding()
        },
    properties: DialogProperties = DialogProperties(),
    content: (ScalingLazyListScope.() -> Unit)? = null,
)

Parameters

@Composable
public fun AlertDialog(
    visible: Boolean,
    onDismissRequest: () -> Unit,
    title: @Composable () -> Unit,
    transformationSpec: TransformationSpec,
    modifier: Modifier = Modifier,
    icon: @Composable (() -> Unit)? = null,
    text: @Composable (() -> Unit)? = null,
    verticalArrangement: Arrangement.Vertical = AlertDialogDefaults.VerticalArrangement,
    contentPadding: @Composable (Boolean) -> PaddingValues = { isScrollable: Boolean ->
        if (icon != null) {
            AlertDialogDefaults.buttonStackWithIconContentPadding(isScrollable)
        } else {
            AlertDialogDefaults.buttonStackContentPadding(isScrollable)
        }
    },
    properties: DialogProperties = DialogProperties(),
    content: (TransformingLazyColumnScope.() -> Unit)? = null,
)

Parameters

@Composable
public fun AlertDialog(
    visible: Boolean,
    onDismissRequest: () -> Unit,
    edgeButton: (@Composable BoxScope.() -> Unit),
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    icon: @Composable (() -> Unit)? = null,
    text: @Composable (() -> Unit)? = null,
    verticalArrangement: Arrangement.Vertical = AlertDialogDefaults.VerticalArrangement,
    contentPadding: PaddingValues =
        if (icon != null) {
            AlertDialogDefaults.contentWithIconPadding()
        } else {
            AlertDialogDefaults.contentPadding()
        },
    properties: DialogProperties = DialogProperties(),
    content: (ScalingLazyListScope.() -> Unit)? = null,
)

Parameters

@Composable
public fun AlertDialog(
    visible: Boolean,
    onDismissRequest: () -> Unit,
    edgeButton: (@Composable BoxScope.() -> Unit),
    title: @Composable () -> Unit,
    transformationSpec: TransformationSpec,
    modifier: Modifier = Modifier,
    icon: @Composable (() -> Unit)? = null,
    text: @Composable (() -> Unit)? = null,
    verticalArrangement: Arrangement.Vertical = AlertDialogDefaults.VerticalArrangement,
    contentPadding: PaddingValues =
        if (icon != null) {
            AlertDialogDefaults.contentWithIconPadding()
        } else {
            AlertDialogDefaults.contentPadding()
        },
    properties: DialogProperties = DialogProperties(),
    content: (TransformingLazyColumnScope.() -> Unit)? = null,
)

Parameters

Code Examples

AlertDialogWithConfirmAndDismissSample

@Composable
@Preview
fun AlertDialogWithConfirmAndDismissSample() {
    var showDialog by remember { mutableStateOf(false) }
    Box(Modifier.fillMaxSize()) {
        FilledTonalButton(
            modifier = Modifier.align(Alignment.Center),
            onClick = { showDialog = true },
            label = { Text("Show Dialog") },
        )
    }
    AlertDialog(
        visible = showDialog,
        onDismissRequest = { showDialog = false },
        icon = {
            Icon(
                Icons.Rounded.AccountCircle,
                modifier = Modifier.size(32.dp),
                contentDescription = null,
                tint = MaterialTheme.colorScheme.primary,
            )
        },
        title = { Text("Enable Battery Saver Mode?") },
        text = { Text("Your battery is low. Turn on battery saver.") },
        confirmButton = {
            AlertDialogDefaults.ConfirmButton(
                onClick = {
                    // Perform confirm action here
                    showDialog = false
                }
            )
        },
        dismissButton = {
            AlertDialogDefaults.DismissButton(
                onClick = {
                    // Perform dismiss action here
                    showDialog = false
                }
            )
        },
    ) {
        item { Text(text = "You can configure battery saver mode in the setting menu.") }
        item { Button(onClick = {}) { Text(text = "Go to settings") } }
    }
}

AlertDialogWithConfirmAndDismissTransformingContentSample

@Preview
@Composable
fun AlertDialogWithConfirmAndDismissTransformingContentSample() {
    var showDialog by remember { mutableStateOf(false) }
    val transformationSpec = rememberTransformationSpec()
    Box(Modifier.fillMaxSize()) {
        FilledTonalButton(
            modifier = Modifier.align(Alignment.Center),
            onClick = { showDialog = true },
            label = { Text("Show Dialog") },
        )
    }
    AlertDialog(
        visible = showDialog,
        onDismissRequest = { showDialog = false },
        icon = {
            Icon(
                Icons.Rounded.AccountCircle,
                modifier = Modifier.size(32.dp),
                contentDescription = null,
                tint = MaterialTheme.colorScheme.primary,
            )
        },
        title = { Text("Enable Battery Saver Mode?") },
        text = { Text("Your battery is low. Turn on battery saver.") },
        transformationSpec = transformationSpec,
        confirmButton = {
            AlertDialogDefaults.ConfirmButton(
                onClick = {
                    // Perform confirm action here
                    showDialog = false
                }
            )
        },
        dismissButton = {
            AlertDialogDefaults.DismissButton(
                onClick = {
                    // Perform dismiss action here
                    showDialog = false
                }
            )
        },
    ) {
        item {
            Text(
                modifier =
                    Modifier.transformedHeight(this, transformationSpec).graphicsLayer {
                        with(SurfaceTransformation(transformationSpec)) {
                            applyContentTransformation()
                            applyContainerTransformation()
                        }
                    },
                text = "You can configure battery saver mode in the setting menu.",
            )
        }
        item {
            Button(
                modifier = Modifier.transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = {},
            ) {
                Text(text = "Go to settings")
            }
        }
    }
}

AlertDialogWithContentGroupsSample

@Preview
@Composable
fun AlertDialogWithContentGroupsSample() {
    var showDialog by remember { mutableStateOf(false) }
    var weatherEnabled by remember { mutableStateOf(false) }
    var calendarEnabled by remember { mutableStateOf(false) }
    Box(Modifier.fillMaxSize()) {
        FilledTonalButton(
            modifier = Modifier.align(Alignment.Center),
            onClick = { showDialog = true },
            label = { Text("Show Dialog") },
        )
    }
    AlertDialog(
        visible = showDialog,
        onDismissRequest = { showDialog = false },
        title = { Text("Share your location") },
        text = { Text(" The following apps have asked you to share your location") },
        edgeButton = {
            AlertDialogDefaults.EdgeButton(
                onClick = {
                    // Perform confirm action here
                    showDialog = false
                }
            ) {
                Text("Share once")
            }
        },
    ) {
        item {
            SwitchButton(
                modifier = Modifier.fillMaxWidth(),
                checked = weatherEnabled,
                onCheckedChange = { weatherEnabled = it },
                label = { Text("Weather") },
            )
        }
        item {
            SwitchButton(
                modifier = Modifier.fillMaxWidth(),
                checked = calendarEnabled,
                onCheckedChange = { calendarEnabled = it },
                label = { Text("Calendar") },
            )
        }
        item { AlertDialogDefaults.GroupSeparator() }
        item {
            FilledTonalButton(
                modifier = Modifier.fillMaxWidth(),
                onClick = {},
                label = { Text(modifier = Modifier.fillMaxWidth(), text = "Never share") },
            )
        }
        item {
            FilledTonalButton(
                modifier = Modifier.fillMaxWidth(),
                onClick = {},
                label = { Text(modifier = Modifier.fillMaxWidth(), text = "Share always") },
            )
        }
    }
}

AlertDialogWithContentGroupsTransformingContentSample

@Preview
@Composable
fun AlertDialogWithContentGroupsTransformingContentSample() {
    var showDialog by remember { mutableStateOf(false) }
    var weatherEnabled by remember { mutableStateOf(false) }
    var calendarEnabled by remember { mutableStateOf(false) }
    val transformationSpec = rememberTransformationSpec()
    Box(Modifier.fillMaxSize()) {
        FilledTonalButton(
            modifier = Modifier.align(Alignment.Center),
            onClick = { showDialog = true },
            label = { Text("Show Dialog") },
        )
    }
    AlertDialog(
        visible = showDialog,
        onDismissRequest = { showDialog = false },
        title = { Text("Share your location") },
        text = { Text(" The following apps have asked you to share your location") },
        transformationSpec = transformationSpec,
        edgeButton = {
            AlertDialogDefaults.EdgeButton(
                onClick = {
                    // Perform confirm action here
                    showDialog = false
                }
            ) {
                Text("Share once")
            }
        },
    ) {
        item {
            SwitchButton(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                checked = weatherEnabled,
                onCheckedChange = { weatherEnabled = it },
                label = { Text("Weather") },
                transformation = SurfaceTransformation(transformationSpec),
            )
        }
        item {
            SwitchButton(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                checked = calendarEnabled,
                onCheckedChange = { calendarEnabled = it },
                label = { Text("Calendar") },
                transformation = SurfaceTransformation(transformationSpec),
            )
        }
        item { AlertDialogDefaults.GroupSeparator() }
        item {
            FilledTonalButton(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                onClick = {},
                label = { Text(modifier = Modifier.fillMaxWidth(), text = "Never share") },
                transformation = SurfaceTransformation(transformationSpec),
            )
        }
        item {
            FilledTonalButton(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                onClick = {},
                label = { Text(modifier = Modifier.fillMaxWidth(), text = "Share always") },
                transformation = SurfaceTransformation(transformationSpec),
            )
        }
    }
}

AlertDialogWithEdgeButtonSample

@Preview
@Composable
fun AlertDialogWithEdgeButtonSample() {
    var showDialog by remember { mutableStateOf(false) }
    Box(Modifier.fillMaxSize()) {
        FilledTonalButton(
            modifier = Modifier.align(Alignment.Center),
            onClick = { showDialog = true },
            label = { Text("Show Dialog") },
        )
    }
    AlertDialog(
        visible = showDialog,
        onDismissRequest = { showDialog = false },
        icon = {
            Icon(
                Icons.Rounded.AccountCircle,
                modifier = Modifier.size(32.dp),
                contentDescription = null,
                tint = MaterialTheme.colorScheme.primary,
            )
        },
        title = { Text("Mobile network is not currently available") },
        text = { Text("Please try again later or check your network settings.") },
        edgeButton = {
            AlertDialogDefaults.EdgeButton(
                onClick = {
                    // Perform confirm action here
                    showDialog = false
                }
            )
        },
    )
}

AlertDialogWithEdgeButtonTransformingContentSample

@Preview
@Composable
fun AlertDialogWithEdgeButtonTransformingContentSample() {
    var showDialog by remember { mutableStateOf(false) }
    Box(Modifier.fillMaxSize()) {
        FilledTonalButton(
            modifier = Modifier.align(Alignment.Center),
            onClick = { showDialog = true },
            label = { Text("Show Dialog") },
        )
    }
    AlertDialog(
        visible = showDialog,
        onDismissRequest = { showDialog = false },
        icon = {
            Icon(
                Icons.Rounded.AccountCircle,
                modifier = Modifier.size(32.dp),
                contentDescription = null,
                tint = MaterialTheme.colorScheme.primary,
            )
        },
        title = { Text("Mobile network is not currently available") },
        text = { Text("Please try again later or check your network settings.") },
        transformationSpec = rememberTransformationSpec(),
        edgeButton = {
            AlertDialogDefaults.EdgeButton(
                onClick = {
                    // Perform confirm action here
                    showDialog = false
                }
            )
        },
    )
}

Create your own Component Library

Material Components are meant to be used as is and they do not allow customizations. To build your own Jetpack Compose component library use Compose Unstyled