Menusanimated

Speed dial

A FAB that fans out a stack of labelled mini actions when expanded.

Note

Upload

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

@Composable
fun SpeedDial() {
    var open by remember { mutableStateOf(false) }
    val rotation by animateFloatAsState(if (open) 45f else 0f, label = "fab")
    val actions = listOf(
        "Note" to Icons.Filled.Edit,
        "Photo" to Icons.Filled.Star,
        "Upload" to Icons.Filled.FileUpload,
    )
    Column(horizontalAlignment = Alignment.End,
        verticalArrangement = Arrangement.spacedBy(12.dp)) {
        actions.forEachIndexed { i, (label, icon) ->
            AnimatedVisibility(open,
                enter = fadeIn() + slideInVertically { it / 2 },
                exit = fadeOut()) {
                Row(verticalAlignment = Alignment.CenterVertically) {
                    Surface(shape = MaterialTheme.shapes.small, tonalElevation = 2.dp) {
                        Text(label, Modifier.padding(horizontal = 8.dp, vertical = 4.dp),
                            style = MaterialTheme.typography.labelMedium)
                    }
                    Spacer(Modifier.width(8.dp))
                    SmallFloatingActionButton(onClick = {}) { Icon(icon, label) }
                }
            }
        }
        FloatingActionButton(onClick = { open = !open }) {
            Icon(Icons.Filled.Add, "Toggle", Modifier.rotate(rotation))
        }
    }
}