---
title: "SwipeToRevealCard"
description: "`SwipeToReveal` Material composable for `Card`s. This adds the option to configure up to two
additional actions on the `Card`: a mandatory `primaryAction` and an optional `secondaryAction`.
These actions are initially hidden and revealed only when the `content` is swiped. These
additional actions can be triggered by clicking on them after they are revealed. It is
recommended to trigger `primaryAction` on full swipe of the `content`."
type: "component"
---

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



`SwipeToReveal` Material composable for `Card`s. This adds the option to configure up to two
additional actions on the `Card`: a mandatory `primaryAction` and an optional `secondaryAction`.
These actions are initially hidden and revealed only when the `content` is swiped. These
additional actions can be triggered by clicking on them after they are revealed. It is
recommended to trigger `primaryAction` on full swipe of the `content`.

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

<div class='sourceset sourceset-android'>Android</div>


```kotlin
@ExperimentalWearMaterialApi
@Composable
public fun SwipeToRevealCard(
    primaryAction: @Composable () -> Unit,
    revealState: RevealState,
    onFullSwipe: () -> Unit,
    modifier: Modifier = Modifier,
    secondaryAction: @Composable (() -> Unit)? = null,
    undoPrimaryAction: @Composable (() -> Unit)? = null,
    undoSecondaryAction: @Composable (() -> Unit)? = null,
    colors: SwipeToRevealActionColors = SwipeToRevealDefaults.actionColors(),
    shape: Shape = SwipeToRevealDefaults.CardActionShape,
    content: @Composable () -> Unit,
)
```


#### Parameters

| | |
| --- | --- |
| primaryAction | A composable to describe the primary action when swiping. The action will be triggered on clicking the action. See `SwipeToRevealPrimaryAction`. |
| revealState | `RevealState` of the `SwipeToReveal` |
| onFullSwipe | A lambda which will be triggered on full swipe from either of the anchors. We recommend to keep this similar to primary action click action. This sets the `RevealState.lastActionType` to `RevealActionType.PrimaryAction`. |
| modifier | `Modifier` to be applied on the composable |
| secondaryAction | A composable to describe the contents of secondary action.The action will be triggered on clicking the action. See `SwipeToRevealSecondaryAction` |
| undoPrimaryAction | A composable to describe the contents of undo action when the primary action was triggered. See `SwipeToRevealUndoAction` |
| undoSecondaryAction | A composable to describe the contents of undo action when secondary action was triggered. See `SwipeToRevealUndoAction` |
| colors | An instance of `SwipeToRevealActionColors` to describe the colors of actions. See `SwipeToRevealDefaults.actionColors`. |
| shape | The shape of primary and secondary action composables. Recommended shape for cards is `SwipeToRevealDefaults.CardActionShape`. |
| content | The initial content shown prior to the swipe-to-reveal gesture. Custom accessibility actions should always be added to the content using `androidx.compose.ui.semantics.semantics` - examples are shown in the code samples. |






## Code Examples
### SwipeToRevealCardSample
```kotlin
@OptIn(ExperimentalWearMaterialApi::class)
@Composable
fun SwipeToRevealCardSample(swipeToDismissBoxState: SwipeToDismissBoxState) {
    val revealState = rememberRevealState()
    SwipeToRevealCard(
        revealState = revealState,
        modifier =
            Modifier.fillMaxWidth()
                // Use edgeSwipeToDismiss to allow SwipeToDismissBox to capture swipe events
                .edgeSwipeToDismiss(swipeToDismissBoxState),
        primaryAction = {
            SwipeToRevealPrimaryAction(
                revealState = revealState,
                icon = { Icon(SwipeToRevealDefaults.Delete, "Delete") },
                label = { Text("Delete") },
                onClick = { /* Add the click handler here */ },
            )
        },
        secondaryAction = {
            SwipeToRevealSecondaryAction(
                revealState = revealState,
                onClick = { /* Add the click handler here */ },
            ) {
                Icon(SwipeToRevealDefaults.MoreOptions, "More Options")
            }
        },
        undoPrimaryAction = {
            SwipeToRevealUndoAction(
                revealState = revealState,
                label = { Text("Undo") },
                onClick = { /* Add the undo handler for primary action */ },
            )
        },
        undoSecondaryAction = {
            SwipeToRevealUndoAction(
                revealState = revealState,
                label = { Text("Undo") },
                onClick = { /* Add the undo handler for secondary action */ },
            )
        },
        onFullSwipe = { /* Add the full swipe handler here */ },
    ) {
        AppCard(
            onClick = { /* Add the Card click handler */ },
            appName = { Text("App name") },
            appImage = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
                    contentDescription = "airplane",
                    modifier =
                        Modifier.size(CardDefaults.AppImageSize)
                            .wrapContentSize(align = Alignment.Center),
                )
            },
            title = { Text("App Card") },
            time = { Text("now") },
            modifier =
                Modifier.semantics {
                    // Use custom actions to make the primary and secondary actions accessible
                    customActions =
                        listOf(
                            CustomAccessibilityAction("Delete") {
                                /* Add the primary action click handler here */
                                true
                            },
                            CustomAccessibilityAction("More Options") {
                                /* Add the secondary click handler here */
                                true
                            },
                        )
                },
        ) {
            Text("Basic card with Swipe to Reveal actions")
        }
    }
}
```