ConfirmationDialog

Component in Wear Material 3 Compose

Shows a transient [ConfirmationDialog] with an icon and optional very short [curvedText]. The length of the curved text should be very short and should not exceed 1-2 words. If a longer text is required, then the alternative [ConfirmationDialog] overload with slot for linear text should be used instead.

The [ConfirmationDialog] shows a message to the user for [durationMillis]. After a specified timeout, the [onDismissRequest] callback will be invoked, where it's up to the caller to handle the dismissal. To hide the confirmation dialog, the [visible] parameter should be set to false.

Where user input is required, such as choosing to ok or cancel an action, use [AlertDialog] instead of [ConfirmationDialog].

Last updated: 2025-02-05 12:19

Installation

dependencies {
   implementation("androidx.wear.compose:compose-material3:1.0.0-alpha32")
}

Overloads

@Composable
fun ConfirmationDialog(
    visible: Boolean,
    onDismissRequest: () -> Unit,
    curvedText: (CurvedScope.() -> Unit)?,
    modifier: Modifier = Modifier,
    colors: ConfirmationDialogColors = ConfirmationDialogDefaults.colors(),
    properties: DialogProperties = DialogProperties(),
    durationMillis: Long = ConfirmationDialogDefaults.DurationMillis,
    content: @Composable () -> Unit
): Unit

Parameters

name	description
visible	A boolean indicating whether the confirmation dialog should be displayed.
onDismissRequest	A lambda function to be called when the dialog is dismissed - either by swiping right or when the [durationMillis] has passed.
curvedText	A slot for displaying curved text content which will be shown along the bottom edge of the dialog. We recommend using [confirmationDialogCurvedText] for this parameter, which will give the default sweep angle and padding.
modifier	Modifier to be applied to the confirmation content.
colors	A [ConfirmationDialogColors] object for customizing the colors used in this [ConfirmationDialog].
properties	An optional [DialogProperties] object for configuring the dialog's behavior.
durationMillis	The duration in milliseconds for which the dialog is displayed. This value will be adjusted by the accessibility manager according to the content displayed.
content	A slot for displaying an icon inside the confirmation dialog. It's recommended to set its size to [ConfirmationDialogDefaults.IconSize]

@Composable
fun ConfirmationDialog(
    visible: Boolean,
    onDismissRequest: () -> Unit,
    text: @Composable (ColumnScope.() -> Unit)?,
    modifier: Modifier = Modifier,
    colors: ConfirmationDialogColors = ConfirmationDialogDefaults.colors(),
    properties: DialogProperties = DialogProperties(),
    durationMillis: Long = ConfirmationDialogDefaults.DurationMillis,
    content: @Composable () -> Unit
)

Parameters

name	description
visible	A boolean indicating whether the confirmation dialog should be displayed.
onDismissRequest	A lambda function to be called when the dialog is dismissed - either by swiping right or when the [durationMillis] has passed.
text	A slot for displaying text below the icon. It should not exceed 3 lines.
modifier	Modifier to be applied to the confirmation content.
colors	A [ConfirmationDialogColors] object for customizing the colors used in this [ConfirmationDialog].
properties	An optional [DialogProperties] object for configuring the dialog's behavior.
durationMillis	The duration in milliseconds for which the dialog is displayed. This value will be adjusted by the accessibility manager according to the content displayed.
content	A slot for displaying an icon inside the confirmation dialog, which can be animated. It's recommended to set its size to [ConfirmationDialogDefaults.SmallIconSize]

Code Examples

ConfirmationDialogSample

@Composable
fun ConfirmationDialogSample() {
    var showConfirmation by remember { mutableStateOf(false) }

    Box(Modifier.fillMaxSize()) {
        FilledTonalButton(
            modifier = Modifier.align(Alignment.Center),
            onClick = { showConfirmation = true },
            label = { Text("Show Confirmation") }
        )
    }

    // Has an icon and a short curved text content, which will be displayed along the bottom edge of
    // the screen.
    val curvedTextStyle = ConfirmationDialogDefaults.curvedTextStyle
    ConfirmationDialog(
        visible = showConfirmation,
        onDismissRequest = { showConfirmation = false },
        curvedText = { confirmationDialogCurvedText("Confirmed", curvedTextStyle) },
    ) {
        FavoriteIcon(ConfirmationDialogDefaults.IconSize)
    }
}

LongTextConfirmationDialogSample

@Composable
fun LongTextConfirmationDialogSample() {
    var showConfirmation by remember { mutableStateOf(false) }

    Box(Modifier.fillMaxSize()) {
        FilledTonalButton(
            modifier = Modifier.align(Alignment.Center),
            onClick = { showConfirmation = true },
            label = { Text("Show Confirmation") }
        )
    }

    // Has an icon and a text content. Text will be displayed in the center of the screen below the
    // icon.
    ConfirmationDialog(
        visible = showConfirmation,
        onDismissRequest = { showConfirmation = false },
        text = { Text(text = "Your message has been sent") },
    ) {
        Icon(
            imageVector = Icons.AutoMirrored.Filled.Send,
            contentDescription = null,
            modifier = Modifier.size(ConfirmationDialogDefaults.SmallIconSize),
        )
    }
}