SwipeToDismissBox

Common

A composable that can be dismissed by swiping left or right.

Last updated: 2025-07-04 17:31

Installation

dependencies {
   implementation("androidx.compose.material3:material3:1.4.0-alpha17")
}

Overloads

@Composable
fun SwipeToDismissBox(
    state: SwipeToDismissBoxState,
    backgroundContent: @Composable RowScope.() -> Unit,
    modifier: Modifier = Modifier,
    enableDismissFromStartToEnd: Boolean = true,
    enableDismissFromEndToStart: Boolean = true,
    gesturesEnabled: Boolean = true,
    onDismiss: suspend (SwipeToDismissBoxValue) -> Unit = {},
    content: @Composable RowScope.() -> Unit,
)

Parameters

name	description
`state`	The state of this component.
`backgroundContent`	A composable that is stacked behind the [content] and is exposed when the content is swiped. You can/should use the [state] to have different backgrounds on each side.
`modifier`	Optional [Modifier] for this component.
`enableDismissFromStartToEnd`	Whether SwipeToDismissBox can be dismissed from start to end.
`enableDismissFromEndToStart`	Whether SwipeToDismissBox can be dismissed from end to start.
`gesturesEnabled`	Whether swipe-to-dismiss can be interacted by gestures.
`onDismiss`	Optional callback to be called when [content] is dismissed. onDismissed provides the current dismissed direction.
`content`	The content that can be dismissed.

@Composable
@Deprecated(
    level = DeprecationLevel.HIDDEN,
    message =
        "Maintained for binary compatibility. Use updated signature with onDismissed " +
            "parameter.",
)
fun SwipeToDismissBox(
    state: SwipeToDismissBoxState,
    backgroundContent: @Composable RowScope.() -> Unit,
    modifier: Modifier = Modifier,
    enableDismissFromStartToEnd: Boolean = true,
    enableDismissFromEndToStart: Boolean = true,
    gesturesEnabled: Boolean = true,
    content: @Composable RowScope.() -> Unit,
)

Code Example

SwipeToDismissListItems

@Preview
@Composable
fun SwipeToDismissListItems() {
    val dismissState = rememberSwipeToDismissBoxState()
    var isVisible by remember { mutableStateOf(true) }
    if (isVisible) {
        SwipeToDismissBox(
            state = dismissState,
            backgroundContent = {
                val color by
                    animateColorAsState(
                        when (dismissState.targetValue) {
                            SwipeToDismissBoxValue.Settled -> Color.LightGray
                            SwipeToDismissBoxValue.StartToEnd -> Color.Green
                            SwipeToDismissBoxValue.EndToStart -> Color.Red
                        }
                    )
                Box(Modifier.fillMaxSize().background(color))
            },
            onDismiss = { direction ->
                if (direction == SwipeToDismissBoxValue.EndToStart) {
                    isVisible = false
                } else {
                    dismissState.reset()
                }
            },
        ) {
            OutlinedCard(shape = RectangleShape) {
                ListItem(
                    headlineContent = { Text("Cupcake") },
                    supportingContent = { Text("Swipe me left or right!") },
                )
            }
        }
    }
}

Surface Switch