ConfirmationDialogContent

Component in Wear Material 3 Compose

This overload of [ConfirmationDialogContent] provides the content for a [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.

Prefer using [ConfirmationDialog] directly, which provides built-in animations when showing/hiding the dialog. This composable may be used to provide the content for a confirmation dialog if custom show/hide animations are required.

Last updated: 2025-03-21 11:59

Installation

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

Overloads

@Composable
fun ConfirmationDialogContent(
    curvedText: (CurvedScope.() -> Unit)?,
    modifier: Modifier = Modifier,
    colors: ConfirmationDialogColors = ConfirmationDialogDefaults.colors(),
    content: @Composable () -> Unit
): Unit

Parameters

name	description
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].
content	A slot for displaying an icon inside the confirmation dialog. It's recommended to set its size to [ConfirmationDialogDefaults.IconSize]

@Composable
fun ConfirmationDialogContent(
    text: @Composable (ColumnScope.() -> Unit)?,
    modifier: Modifier = Modifier,
    colors: ConfirmationDialogColors = ConfirmationDialogDefaults.colors(),
    content: @Composable () -> Unit
)

Parameters

name	description
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].
content	A slot for displaying an icon inside the confirmation dialog. It's recommended to set its size to [ConfirmationDialogDefaults.IconSize]

Code Examples

ConfirmationDialogSample

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

    // Use AppScaffold to improve ConfirmationDialog's Performance
    AppScaffold {
        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) },
        ) {
            Icon(
                painter = painterResource(R.drawable.ic_favorite_rounded),
                contentDescription = null,
                modifier = Modifier.size(ConfirmationDialogDefaults.IconSize)
            )
        }
    }
}

LongTextConfirmationDialogSample

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

    // Use AppScaffold to improve ConfirmationDialog's Performance
    AppScaffold {
        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),
            )
        }
    }
}