Sheets: bottom

Bottom Sheets are surfaces anchored to the bottom of the screen that present users supplement content.

Use Sheets bottom to:

Display content that complements the screen’s primary content
Expose all complements options

On this page

Specifications references
Accessibility
Implementation
- Jetpack Compose
  - OdsBottomSheetScaffold API #

Specifications references

Accessibility

Please follow accessibility criteria for development.

Implementation

BottomSheet light BottomSheet dark

The contents within a bottom sheet should follow their own accessibility guidelines, such as images having content descriptions set on them.

Jetpack Compose

OdsBottomSheetScaffold(
    sheetContent = {
        // Put here the content of the sheet
    },
    modifier = Modifier,
    scaffoldState = rememberBottomSheetScaffoldState(),
    topBar = null,
    snackbarHost = {},
    floatingActionButton = {},
    floatingActionButtonPosition = FabPosition.End,
    sheetGesturesEnabled = true,
    sheetPeekHeight = 56.dp,
    content = {
        // Put here the screen content
    }
)

OdsBottomSheetScaffold API #

Parameter	Default value	Description
`sheetContent: @Composable ColumnScope.() -> Unit`		Content of the bottom sheet
`modifier: Modifier`	`Modifier`	`Modifier` applied to the bottom sheet scaffold
`scaffoldState: BottomSheetScaffoldState`	`rememberBottomSheetScaffoldState()`	State of the scaffold
`topBar: (@Composable () -> Unit)?`	`null`	Top app bar displayed in the scaffold
`snackbarHost: @Composable (SnackbarHostState) -> Unit`	`{ SnackbarHost(it) }`	Composable hosting the snackbars shown inside the scaffold
`floatingActionButton: (@Composable () -> Unit)?`	`null`	Floating action button displayed in the scaffold
`floatingActionButtonPosition: FabPosition`	`FabPosition.End`	Position of the floating action button
`sheetGesturesEnabled: Boolean`	`true`	Whether the bottom sheet can be interacted with by gestures
`sheetPeekHeight: Dp`	`BottomSheetScaffoldDefaults.SheetPeekHeight`	Height of the bottom sheet when it is collapsed
`content: @Composable (PaddingValues) -> Unit`		Content of the screen