Badgesanimated

Step progress

A wizard chip whose active segment fills left-to-right as the step advances.

Step 2

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 step by remember { mutableIntStateOf(2) }
LaunchedEffect(Unit) {
    while (true) { delay(1200); step = step % 4 + 1 }
}
Surface(
    shape = RoundedCornerShape(50),
    color = MaterialTheme.colorScheme.surfaceVariant,
    contentColor = MaterialTheme.colorScheme.onSurfaceVariant,
) {
    Row(
        Modifier.padding(horizontal = 10.dp, vertical = 6.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(4.dp),
    ) {
        Text("Step $step", fontSize = 11.sp, fontWeight = FontWeight.Medium)
        Spacer(Modifier.width(2.dp))
        repeat(4) { i ->
            val active = i < step
            val w by animateDpAsState(if (active) 16.dp else 6.dp, label = "w")
            Box(
                Modifier
                    .width(w)
                    .height(4.dp)
                    .background(
                        if (active) MaterialTheme.colorScheme.primary
                        else MaterialTheme.colorScheme.outlineVariant,
                        RoundedCornerShape(50),
                    ),
            )
        }
    }
}