State of Compose 2023 results are in! Click here to learn more

← Back to Material 3 Compose

ModalBottomSheet

Component
in
Material 3
. Since 1.1.0

Overview

Code Examples

<a href="https://m3.material.io/components/bottom-sheets/overview" class="external" target="_blank">Material Design modal bottom sheet</a>.

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(https://developer.android.com/images/reference/androidx/compose/material3/bottom_sheet.png)

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

Overloads

ModalBottomSheet

@Composable
@ExperimentalMaterial3Api
fun ModalBottomSheet(
    onDismissRequest: () -> Unit,
    modifier: Modifier = Modifier,
    sheetState: SheetState = rememberModalBottomSheetState(),
    shape: Shape = BottomSheetDefaults.ExpandedShape,
    containerColor: Color = BottomSheetDefaults.ContainerColor,
    contentColor: Color = contentColorFor(containerColor),
    tonalElevation: Dp = BottomSheetDefaults.Elevation,
    scrimColor: Color = BottomSheetDefaults.ScrimColor,
    dragHandle: @Composable (() -> Unit)? = { BottomSheetDefaults.DragHandle() },
    content: @Composable ColumnScope.() -> Unit,
)

Parameters

NameDescription
onDismissRequestExecutes when the user clicks outside of the bottom sheet, after sheet animates to Hidden.
modifierOptional Modifier for the bottom sheet.
sheetStateThe state of the bottom sheet.
shapeThe shape of the bottom sheet.
containerColorThe color used for the background of this bottom sheet
contentColorThe 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.
tonalElevationThe tonal elevation of this bottom sheet.
scrimColorColor of the scrim that obscures content when the bottom sheet is open.
dragHandleOptional visual marker to swipe the bottom sheet.
contentThe content to be displayed inside the bottom sheet