Buttonsanimated

Morphing State

A button that morphs from label to spinner to a success checkmark.

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 state by remember { mutableStateOf(0) }
Button(
    onClick = { state = 1 },
    colors = ButtonDefaults.buttonColors(
        containerColor = if (state == 2) Color(0xFF16A34A)
            else MaterialTheme.colorScheme.primary,
    ),
) {
    AnimatedContent(state, label = "morph") { s ->
        when (s) {
            0 -> Text("Submit")
            1 -> CircularProgressIndicator(
                Modifier.size(18.dp),
                strokeWidth = 2.dp,
                color = LocalContentColor.current,
            )
            else -> Icon(Icons.Filled.Check, contentDescription = "Done")
        }
    }
}