---
title: "BottomSheet"
description: "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."
type: "component"
---

<div class='type'>Composable Component</div>



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.

<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>


```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. |






## Code Examples
### ManualModalBottomSheetSample
```kotlin
@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Composable
fun ManualModalBottomSheetSample() {
    var showSheet by remember { mutableStateOf(false) }
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Button(onClick = { showSheet = true }) { Text("Show Manual Sheet") }
    }
    val sheetState = rememberModalBottomSheetState()
    if (showSheet) {
        Scrim("scrim", onClick = { showSheet = false })
        BottomSheet(
            modifier = Modifier,
            state = sheetState,
            onDismissRequest = { showSheet = false },
        ) {
            LazyColumn {
                items(25) {
                    ListItem(
                        headlineContent = { Text("Item $it") },
                        leadingContent = {
                            Icon(
                                Icons.Default.Favorite,
                                contentDescription = "Localized description",
                            )
                        },
                        colors =
                            ListItemDefaults.colors(
                                containerColor = MaterialTheme.colorScheme.surfaceContainerLow
                            ),
                    )
                }
            }
        }
    }
    // Handle sheet animations
    LaunchedEffect(showSheet) {
        if (showSheet) {
            sheetState.show()
        } else {
            sheetState.hide()
        }
    }
}
```