---
url: /components/bottom-sheets/specs.md
description: >-
Bottom sheets are surfaces containing supplementary content, anchored to the
bottom of the screen.
---
# Bottom sheets
Bottom sheets are surfaces containing supplementary content, anchored to the bottom of the screen.
[Overview](overview.md) · **Specs** · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)
Modal bottom sheets are above a scrim while standard bottom sheets don't have a scrim. Besides this, both variants of bottom sheets have the same specs.
1. Container
2. Drag handle (optional)
3. Scrim
## Tokens and specs
Browse the component elements, attributes, tokens, and their values. [*Learn more about design tokens*](../../foundations/design-tokens/overview.md)
::: token-table token-table-75e530a1014802b3-9e98136c
**Bottom sheets tokens** · 1 token set · 13 tokens · [live token table](https://m3.material.io/components/bottom-sheets/specs) · DSDB `TOKEN_TABLE.75e530a1014802b3`
* Default context: Theme: Light · Platform: Android · Audience: 3P · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default
* Not configurable here (group default used): Motion scheme: Standard · Font: Static · Language height: Small
* Other contexts: Theme: Dark · Contrast: Medium contrast, High contrast. "Other contexts" lists values that differ from the default when only that one context changes.
* Reference chain: aliases from the token to its source value (`token → alias → … → value`). "—" means the token holds a literal value.
**Sheets - Bottom** · `md.comp.sheet.bottom` · 13 tokens
For bottom sheets.
| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| Enabled › Container | `md.comp.sheet.bottom.docked.container.color` | Color | `md.sys.color.surface-container-low` → `md.ref.palette.neutral96` | `#F7F2FA` | Dark: `#1D1B20` via `md.ref.palette.neutral10` |
| Enabled › Container | `md.comp.sheet.bottom.docked.container.surface-tint-layer.color` (deprecated) | Color | `md.sys.color.surface-tint` → `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`
Medium contrast: `#4F378B` via `md.ref.palette.primary30`
High contrast: `#381E72` via `md.ref.palette.primary20` |
| Enabled › Container | `md.comp.sheet.bottom.docked.modal.container.elevation` | Elevation | `md.sys.elevation.level1` | `1dp` | — |
| Enabled › Container | `md.comp.sheet.bottom.docked.standard.container.elevation` | Elevation | `md.sys.elevation.level1` | `1dp` | — |
| Enabled › Container | `md.comp.sheet.bottom.docked.container.shape` | Shape | `md.sys.shape.corner.extra-large.top` | `Rounded corners: top-left 28dp, top-right 28dp` | — |
| Enabled › Container | `md.comp.sheet.bottom.docked.minimized.container.shape` | Shape | `md.sys.shape.corner.none` | `Rounded corners 0dp` | — |
| Enabled › Drag handle | `md.comp.sheet.bottom.docked.drag-handle.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`
Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`
High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Enabled › Drag handle | `md.comp.sheet.bottom.docked.drag-handle.opacity` (deprecated) | Opacity | — | `0.4` | — |
| Enabled › Drag handle | `md.comp.sheet.bottom.docked.drag-handle.width` | Length | — | `32dp` | — |
| Enabled › Drag handle | `md.comp.sheet.bottom.docked.drag-handle.height` | Length | — | `4dp` | — |
| Enabled › Focus indicator | `md.comp.sheet.bottom.focus.indicator.color` | Color | `md.sys.color.secondary` → `md.ref.palette.secondary40` | `#625B71` | Dark: `#CCC2DC` via `md.ref.palette.secondary80`
Medium contrast: `#4A4458` via `md.ref.palette.secondary30`
High contrast: `#332D41` via `md.ref.palette.secondary20` |
| Enabled › Focus indicator | `md.comp.sheet.bottom.focus.indicator.thickness` | Length | `md.sys.state.focus-indicator.thickness` | `3dp` | — |
| Enabled › Focus indicator | `md.comp.sheet.bottom.focus.indicator.outline.offset` | Length | `md.sys.state.focus-indicator.outer-offset` | `2dp` | — |
:::
## Color
Color values are implemented through [design tokens](../../foundations/design-tokens/overview.md "Design tokens are the building blocks of all UI elements. The same tokens are used in designs, tools, and code."). For design, this means working with color values that correspond with tokens. For implementation, a color value will be a token that references a value. [Learn more about design tokens](../../foundations/design-tokens/overview.md)
Bottom sheet color roles used for both light and dark schemes:
1. Scrim\*
2. On surface variant
3. Surface container low
\*On Android platforms, the scrim color and opacity is automatically handled by the system UI.
## Measurements
Bottom sheet padding and size measurements
Bottom sheets span the full window width up to 640dp. When the window width exceeds 640dp, bottom sheets adjust to have a top margin of 56dp and side margins of 56dp.
| Attribute | Value |
| --------------------------------------- | --------------------------------- |
| Drag handle alignment (horizontal) | Center |
| Drag handle padding top/bottom | 22dp |
| Top margin | 72dp |
| Top margin (window width > 640dp) | 56dp |
| Start/end margin (window width > 640dp) | 56dp |
| Width | Full width, up to max-width 640dp |
| Height | Variable |