# 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

```kotlin
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.

## Related components

- [List](https://m3e.ljzapps.app/docs/components/list.md)
- [Snackbar](https://m3e.ljzapps.app/docs/components/snackbar.md)
- [Menu](https://m3e.ljzapps.app/docs/components/menu.md)