---
title: "SwipeToDismissBox"
description: "A composable that can be dismissed by swiping left or right."
type: "component"
---

<div class='type'>Composable Component</div>



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

<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>


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


#### Parameters

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




<div class='sourceset sourceset-common'>Common</div>


> **Deprecated** Maintained for binary compatibility. Use updated signature with onDismissed parameter.

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




## Code Examples
### SwipeToDismissListItems
```kotlin
@Preview
@Composable
fun SwipeToDismissListItems() {
    val dismissState = rememberSwipeToDismissBoxState()
    var isVisible by remember { mutableStateOf(true) }
    val scope = rememberCoroutineScope()
    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 {
                    scope.launch { dismissState.reset() }
                }
            },
        ) {
            OutlinedCard(shape = RectangleShape) {
                ListItem(
                    headlineContent = { Text("Cupcake") },
                    supportingContent = { Text("Swipe me left or right!") },
                )
            }
        }
    }
}
```