Badgesanimated

Status morph

A task chip that crossfades from a pending clock to a green done check.

PendingDone

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 done by remember { mutableStateOf(false) }
LaunchedEffect(Unit) {
    while (true) { done = false; delay(1500); done = true; delay(1500) }
}
val container by animateColorAsState(
    if (done) Color(0xFFDCFCE7) else Color(0xFFFEF3C7),
    label = "bg",
)
val content by animateColorAsState(
    if (done) Color(0xFF15803D) else Color(0xFFB45309),
    label = "fg",
)
Surface(shape = RoundedCornerShape(50), color = container, contentColor = content) {
    Row(
        Modifier.padding(horizontal = 10.dp, vertical = 4.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(6.dp),
    ) {
        AnimatedContent(
            targetState = done,
            transitionSpec = { scaleIn() + fadeIn() togetherWith scaleOut() + fadeOut() },
            label = "icon",
        ) { d ->
            Icon(
                if (d) Icons.Filled.CheckCircle else Icons.Filled.Schedule,
                contentDescription = null,
                modifier = Modifier.size(14.dp),
            )
        }
        Text(if (done) "Done" else "Pending", fontSize = 12.sp, fontWeight = FontWeight.Medium)
    }
}