We just launched Compose Examples featuring over 150+ components! Check it out →

SuccessConfirmation

Android

Component in Wear Material 3 Compose

Shows a [Confirmation] dialog with a success icon and optional short curved text. This confirmation indicates a successful operation or action.

The confirmation will show 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, [show] parameter should be set to false.

Last updated:

Installation

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

Overloads

@Composable
fun SuccessConfirmation(
    show: Boolean,
    onDismissRequest: () -> Unit,
    modifier: Modifier = Modifier,
    curvedText: (CurvedScope.() -> Unit)? = ConfirmationDefaults.successText(),
    colors: ConfirmationColors = ConfirmationDefaults.successColors(),
    properties: DialogProperties = DialogProperties(),
    durationMillis: Long = ConfirmationDefaults.ConfirmationDurationMillis,
    content: @Composable BoxScope.() -> Unit = ConfirmationDefaults.SuccessIcon,
)

Parameters

namedescription
showA boolean indicating whether the confirmation should be displayed.
onDismissRequestA lambda function to be called when the dialog is dismissed - either by swiping right or when the [durationMillis] has passed.
modifierModifier to be applied to the confirmation content.
curvedTextA slot for displaying curved text content which will be shown along the bottom edge of the dialog. Defaults to a localized success message.
colorsA [ConfirmationColors] object for customizing the colors used in this [SuccessConfirmation].
propertiesAn optional [DialogProperties] object for configuring the dialog's behavior.
durationMillisThe duration in milliseconds for which the dialog is displayed. Defaults to [ConfirmationDefaults.ConfirmationDurationMillis].
contentA slot for displaying an icon inside the confirmation dialog, which can be animated. Defaults to an animated [ConfirmationDefaults.SuccessIcon].

Code Example

SuccessConfirmationSample

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

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

    SuccessConfirmation(show = showConfirmation, onDismissRequest = { showConfirmation = false })
}
by @alexstyl