Skip to content
Containment

Modal Bottom Sheet

A sheet that slides up from the bottom edge

A modal bottom sheet presents a focused set of actions anchored to the bottom of the screen, dimming the content behind it. Drive it with rememberModalBottomSheetState and hide it before clearing the open flag for a smooth exit animation.

Modal Bottom Sheet demos rendered in Compose Playground
Pixel-accurate preview · light theme

Examples

01

Open and dismiss

A Button opens the sheet; selecting an action animates it closed.

Kotlin
val sheetState = rememberModalBottomSheetState()
val scope = rememberCoroutineScope()
var open by remember { mutableStateOf(false) }

Button(onClick = { open = true }) { Text("Show actions") }

if (open) {
    ModalBottomSheet(onDismissRequest = { open = false }, sheetState = sheetState) {
        ListItem(
            headlineContent = { Text("Share") },
            leadingContent = { Icon(Icons.Filled.Share, null) },
            modifier = Modifier.clickable {
                scope.launch { sheetState.hide() }
                    .invokeOnCompletion { open = false }
            }
        )
    }
}