Composable Component
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.
BottomSheet
Common
```kotlin
@Composable
@ExperimentalMaterial3Api
fun BottomSheet(
modifier: Modifier = Modifier,
state: SheetState = rememberModalBottomSheetState(),
onDismissRequest: () -> Unit = {},
maxWidth: Dp = BottomSheetDefaults.SheetMaxWidth,
gesturesEnabled: Boolean = true,
backHandlerEnabled: Boolean = true,
dragHandle: @Composable (() -> Unit)? = { BottomSheetDefaults.DragHandle() },
contentWindowInsets: @Composable () -> WindowInsets = {
BottomSheetDefaults.standardWindowInsets
},
shape: Shape = BottomSheetDefaults.ExpandedShape,
containerColor: Color = BottomSheetDefaults.ContainerColor,
contentColor: Color = contentColorFor(containerColor),
tonalElevation: Dp = BottomSheetDefaults.Elevation,
shadowElevation: Dp = 0.dp,
content: @Composable ColumnScope.() -> Unit,
)
```
#### Parameters
| | |
| --- | --- |
| modifier | The modifier to be applied to the bottom sheet. |
| state | The state object managing the sheet's value and offsets. |
| onDismissRequest | Optional callback invoked when the sheet is swiped to `Hidden`. |
| maxWidth | `Dp` that defines what the maximum width the sheet will take. Pass in `Dp.Unspecified` for a sheet that spans the entire screen width. |
| gesturesEnabled | Whether gestures are enabled. |
| backHandlerEnabled | Whether dismissing via back press and predictive back behavior is enabled |
| dragHandle | Optional visual marker to indicate the sheet is draggable. |
| contentWindowInsets | Window insets to be applied to the content. |
| shape | The shape of the bottom sheet. |
| containerColor | The background color of the bottom sheet. |
| contentColor | The preferred content color. |
| tonalElevation | The tonal elevation of the bottom sheet. |
| shadowElevation | The shadow elevation of the bottom sheet. |
| content | The content of the sheet. |