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



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

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



<h2 id="swipetodismiss-state-modifier-directions-dismissthresholds-background-dismisscontent">SwipeToDismiss</h2>

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


```kotlin
@Composable
@ExperimentalMaterialApi
fun SwipeToDismiss(
    state: DismissState,
    modifier: Modifier = Modifier,
    directions: Set<DismissDirection> = setOf(EndToStart, StartToEnd),
    dismissThresholds: (DismissDirection) -> ThresholdConfig = {
        FixedThreshold(DISMISS_THRESHOLD)
    },
    background: @Composable RowScope.() -> Unit,
    dismissContent: @Composable RowScope.() -> Unit,
) =
    BoxWithConstraints(modifier) {
        val width = constraints.maxWidth.toFloat()
        val isRtl = LocalLayoutDirection.current == LayoutDirection.Rtl

        val anchors = mutableMapOf(0f to Default)
        if (StartToEnd in directions) anchors += width to DismissedToEnd
        if (EndToStart in directions) anchors += -width to DismissedToStart

        val thresholds = { from: DismissValue, to: DismissValue ->
            dismissThresholds(getDismissDirection(from, to)!!)
        }
        val minFactor =
            if (EndToStart in directions) StandardResistanceFactor else StiffResistanceFactor
        val maxFactor =
            if (StartToEnd in directions) StandardResistanceFactor else StiffResistanceFactor
        Box(
            Modifier.swipeable(
                state = state,
                anchors = anchors,
                thresholds = thresholds,
                orientation = Orientation.Horizontal,
                enabled = state.currentValue == Default,
                reverseDirection = isRtl,
                resistance =
                    ResistanceConfig(
                        basis = width,
                        factorAtMin = minFactor,
                        factorAtMax = maxFactor,
                    ),
            )
        ) {
            Row(content = background, modifier = Modifier.matchParentSize())
            Row(
                content = dismissContent,
                modifier = Modifier.offset { IntOffset(state.offset.value.roundToInt(), 0) },
            )
        }
    }
```


#### Parameters

| | |
| --- | --- |
| state | The state of this component. |
| modifier | Optional `Modifier` for this component. |
| directions | The set of directions in which the component can be dismissed. |
| dismissThresholds | The thresholds the item needs to be swiped in order to be dismissed. |
| background | 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. |
| dismissContent | The content that can be dismissed. |