Compose Multiplatform Material3/androidx.compose.material3/ModalBottomSheet

ModalBottomSheet

@Composable
fun ModalBottomSheet(onDismissRequest: () -> Unit, modifier: Modifier = Modifier, sheetState: SheetState = rememberModalBottomSheetState(), sheetMaxWidth: Dp = BottomSheetDefaults.SheetMaxWidth, shape: Shape = BottomSheetDefaults.ExpandedShape, containerColor: Color = BottomSheetDefaults.ContainerColor, contentColor: Color = contentColorFor(containerColor), tonalElevation: Dp = 0.dp, scrimColor: Color = BottomSheetDefaults.ScrimColor, dragHandle: @Composable () -> Unit? = { BottomSheetDefaults.DragHandle() }, contentWindowInsets: @Composable () -> WindowInsets = { BottomSheetDefaults.windowInsets }, properties: ModalBottomSheetProperties = ModalBottomSheetDefaults.properties, content: @Composable ColumnScope.() -> Unit)

Material Design modal bottom sheet.

Modal bottom sheets are used as an alternative to inline menus or simple dialogs on mobile, especially when offering a long list of action items, or when items require longer descriptions and icons. Like dialogs, modal bottom sheets appear in front of app content, disabling all other app functionality when they appear, and remaining on screen until confirmed, dismissed, or a required action has been taken.

Bottom sheet image

A simple example of a modal bottom sheet looks like this:

Parameters

onDismissRequest

Executes when the user clicks outside of the bottom sheet, after sheet animates to Hidden.

modifier

Optional Modifier for the bottom sheet.

sheetState

The state of the bottom sheet.

sheetMaxWidth

Dp that defines what the maximum width the sheet will take. Pass in Dp.Unspecified for a sheet that spans the entire screen width.

shape

The shape of the bottom sheet.

containerColor

The color used for the background of this bottom sheet

contentColor

The preferred color for content inside this bottom sheet. Defaults to either the matching content color for containerColor, or to the current LocalContentColor if containerColor is not a color from the theme.

tonalElevation

when containerColor is ColorScheme.surface, a translucent primary color overlay is applied on top of the container. A higher tonal elevation value will result in a darker color in light theme and lighter color in dark theme. See also: Surface.

scrimColor

Color of the scrim that obscures content when the bottom sheet is open.

dragHandle

Optional visual marker to swipe the bottom sheet.

contentWindowInsets

window insets to be passed to the bottom sheet content via PaddingValues params.

properties

ModalBottomSheetProperties for further customization of this modal bottom sheet's window behavior.

content

The content to be displayed inside the bottom sheet.

Samples

androidx.compose.material3.samples.ModalBottomSheetSample