---
title: Bottom Sheet
description: Modal bottom sheets for action menus, confirmations, and lightweight forms.
---

Use bottom sheets for contextual actions and short tasks that should stay close to the current screen.

<UiDemo id="bottom-sheet-action-menu" />

## Installation

<Tabs>
<Tab title="Gradle">
```kotlin title="app/build.gradle.kts"
implementation("com.composables:ui:0.1.0")
```
</Tab>
<Tab title="Copy & Paste">
#### Add the required dependencies

```kotlin title="app/build.gradle.kts"
implementation("com.composables:composeunstyled:2.7.0")
```

#### Copy and paste the following sources into your project

<ComponentSource file="components/BottomSheet.kt" />
<ComponentSource file="components/Utils.kt" />
</Tab>
</Tabs>

## Examples

### Confirmation

<UiDemo id="bottom-sheet-confirmation" />

### Form

<UiDemo id="bottom-sheet-form" />

## API Reference

### rememberBottomSheetState

Creates and remembers a [BottomSheetState] to be used in a [BottomSheet].

```kotlin
@Composable
fun rememberBottomSheetState(
    initialDetent: BottomSheetDetent = BottomSheetDetent.Hidden,
    detents: List<BottomSheetDetent> = listOf(BottomSheetDetent.Hidden, BottomSheetDetent.FullyExpanded),
): BottomSheetState
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `initialDetent` | `BottomSheetDetent` | Detent to be used when the bottom sheet state is first created. |
| `detents` | `List<BottomSheetDetent>` | Available detents that the bottom sheet can move between. |

### BottomSheet

A modal bottom sheet with optional header and footer content.

```kotlin
@Composable
fun BottomSheet(
    state: BottomSheetState,
    onDismissRequest: () -> Unit,
    modifier: Modifier = Modifier,
    toolbar: (@Composable () -> Unit)? = null,
    footer: (@Composable ColumnScope.() -> Unit)? = null,
    shape: Shape = Theme[shapes][sheetShape],
    backgroundColor: Color = Theme[colors][panelColor],
    contentColor: Color = Theme[colors][onPanelColor],
    contentPadding: PaddingValues = PaddingValues(20.dp),
    shadow: Shadow = Theme[shadows][overlayShadow],
    body: @Composable ColumnScope.() -> Unit,
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `state` | `BottomSheetState` | State object that controls the bottom sheet. |
| `onDismissRequest` | `() -> Unit` | Called when the sheet should dismiss. |
| `modifier` | `Modifier` | Modifier applied to the bottom sheet container. |
| `toolbar` | `(@Composable () -> Unit)?` | Optional header content shown at the top of the sheet. |
| `footer` | `(@Composable ColumnScope.() -> Unit)?` | Optional footer content shown below the sheet body. |
| `shape` | `Shape` | Shape used for the sheet container. |
| `backgroundColor` | `Color` | Background color used for the sheet surface. |
| `contentColor` | `Color` | Color used for sheet content. |
| `contentPadding` | `PaddingValues` | Padding applied around the sheet body content. |
| `shadow` | `Shadow` | Shadow applied to the sheet container. |
| `body` | `@Composable ColumnScope.() -> Unit` | Main content displayed inside the sheet. |

### BottomSheetDetent

Supported resting positions for the bottom sheet.

```kotlin
@JvmInline
value class BottomSheetDetent internal constructor(
    @Suppress("unused") private val value: Int,
)
```

| Value | Description |
|-------|-------------|
| `Hidden` | Keeps the bottom sheet off screen. |
| `FullyExpanded` | Shows the bottom sheet at its expanded position. |

### animateTo

Animates a BottomSheetState to the requested detent.

```kotlin
suspend fun animateTo(detent: BottomSheetDetent)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `detent` | `BottomSheetDetent` | Target detent to animate the sheet toward. |

### show

Animates the bottom sheet to its fully expanded state.

```kotlin
suspend fun show()
```

### hide

Animates the bottom sheet to its hidden state.

```kotlin
suspend fun hide()
```