Component

Material Design 3 bottom sheets tokens

Browse tokens

Token

See more values

Compare token values by selecting another context

Theme
Contrast
More contexts
Platform
Audience
What do 1P and 3P mean?

1P means first-party; 3P means third-party. We interpret 1P Baseline as the configuration for Google's own products, and 3P as the configuration for other developers.

Material supplies these audience labels but does not define them in the captured data. They are not a baseline-versus-Expressive switch.

Enabled
Container
Container tokens
TokenValue
Sheet bottom docked container colormd.comp.sheet.bottom.docked.container.color
#F7F2FA
Sheet bottom docked container surface tint layer colormd.comp.sheet.bottom.docked.container.surface-tint-layer.color
#6750A4
Sheet bottom docked modal container elevationmd.comp.sheet.bottom.docked.modal.container.elevation
1dp
Sheet bottom docked standard container elevationmd.comp.sheet.bottom.docked.standard.container.elevation
1dp
Sheet bottom docked container shapemd.comp.sheet.bottom.docked.container.shape
Default: 0dp · Top-left: 28dp · Top-right: 28dp
Sheet bottom docked minimized container shapemd.comp.sheet.bottom.docked.minimized.container.shape
0dp
Drag handle
Drag handle tokens
TokenValue
Sheet bottom docked drag handle colormd.comp.sheet.bottom.docked.drag-handle.color
#49454F
Sheet bottom docked drag handle opacitymd.comp.sheet.bottom.docked.drag-handle.opacity
40%
Sheet bottom docked drag handle widthmd.comp.sheet.bottom.docked.drag-handle.width
32dp
Sheet bottom docked drag handle heightmd.comp.sheet.bottom.docked.drag-handle.height
4dp
Focus indicator
Focus indicator tokens
TokenValue
Sheet bottom focus indicator colormd.comp.sheet.bottom.focus.indicator.color
#625B71
Sheet bottom focus indicator thicknessmd.comp.sheet.bottom.focus.indicator.thickness
3dp
Sheet bottom focus indicator offsetmd.comp.sheet.bottom.focus.indicator.outline.offset
2dp