Swipe to dismiss

Reveals or triggers an action when an item is swiped sideways.

Category: Containment
API status: Stable
Compose APIs: SwipeToDismissBox, rememberSwipeToDismissBoxState, SwipeToDismissBoxValue
Interactive page: https://m3e.ljzapps.app/#components/swipe-to-dismiss

When to use

Use it for list items with one or two quick actions, such as archive and delete. The background content is revealed during the swipe and tells the user what will happen.

Swiping is a shortcut. Offer the same actions in a menu or on selection, because not everyone can swipe.

Playground

The interactive page has a playground with live property controls for this component and generated code.

Examples

Swipe to delete

var visible by remember { mutableStateOf(true) }
val state = rememberSwipeToDismissBoxState()

if (visible) {
    SwipeToDismissBox(
        state = state,
        onDismiss = { visible = false },
        backgroundContent = {
            Box(
                Modifier.fillMaxSize().background(MaterialTheme.colorScheme.errorContainer).padding(horizontal = 24.dp),
                contentAlignment = Alignment.CenterEnd,
            ) {
                Icon(Icons.Rounded.Delete, contentDescription = "Delete")
            }
        },
    ) {
        ListItem(headlineContent = { Text("Swipe to delete") })
    }
}

Parameters

Name	Type	Default	Description
`state`	`SwipeToDismissBoxState`		rememberSwipeToDismissBoxState(). Exposes the direction and progress.
`backgroundContent`	`@Composable RowScope.() -> Unit`		Drawn behind the item during the swipe.
`onDismiss`	`(SwipeToDismissBoxValue) -> Unit`	`{}`	Called when the item was swiped past the threshold.
`enableDismissFromStartToEnd / EndToStart`	`Boolean`	`true`	Allowed directions.

Guidelines

Do:

Offer undo.
Use colors and icons that name the action.

Don't:

Do not make destructive actions swipe only.
Do not use it for items with horizontal scrolling content.

Accessibility

Provide an alternative to the gesture, such as a menu with the same actions.
Announce the result, for example with a snackbar that offers undo.