Badgesanimated

Tap ripple

An interactive chip that emits a Material ripple ring outward on press.

Tap me

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

var pressed by remember { mutableStateOf(false) }
val ripple = remember { Animatable(0f) }
LaunchedEffect(pressed) {
    if (pressed) {
        ripple.snapTo(0f)
        ripple.animateTo(1f, tween(500))
        pressed = false
    }
}
Surface(
    shape = RoundedCornerShape(50),
    color = MaterialTheme.colorScheme.primaryContainer,
    contentColor = MaterialTheme.colorScheme.onPrimaryContainer,
    modifier = Modifier.clickable { pressed = true },
) {
    Box(
        Modifier
            .drawBehind {
                if (ripple.value > 0f) {
                    drawCircle(
                        color = Color.White.copy(alpha = 0.4f * (1f - ripple.value)),
                        radius = size.maxDimension * ripple.value,
                        center = Offset(size.width / 2, size.height / 2),
                    )
                }
            }
            .padding(horizontal = 14.dp, vertical = 4.dp),
    ) {
        Text("Tap me", fontSize = 12.sp, fontWeight = FontWeight.Medium)
    }
}