Buttonsanimated

Swipe to Confirm

A draggable thumb that slides across a track to confirm an action.

Slide to pay

Installation

caveui components are copy-paste Jetpack Compose built entirely on Material 3 — there's no caveui dependency to add. Make sure Material 3 is on your classpath (it ships with the Compose BOM), then copy the Usage snippet below into your project.

kotlin

// build.gradle.kts (module)
dependencies {
    implementation(platform("androidx.compose:compose-bom:2025.06.00"))
    implementation("androidx.compose.material3:material3")
}

Usage

kotlin

val width = 260.dp
val offset = remember { Animatable(0f) }
Box(
    Modifier
        .width(width)
        .height(52.dp)
        .clip(RoundedCornerShape(26.dp))
        .background(MaterialTheme.colorScheme.primaryContainer),
    contentAlignment = Alignment.CenterStart,
) {
    Text("Slide to pay", Modifier.align(Alignment.Center))
    Box(
        Modifier
            .offset { IntOffset(offset.value.toInt(), 0) }
            .padding(4.dp)
            .size(44.dp)
            .clip(CircleShape)
            .background(MaterialTheme.colorScheme.primary)
            .draggable(
                orientation = Orientation.Horizontal,
                state = rememberDraggableState { /* update offset */ },
            ),
        contentAlignment = Alignment.Center,
    ) {
        Icon(Icons.Filled.ChevronRight, contentDescription = "Confirm")
    }
}