Component

Material Design 3 snackbar 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.

Font

Enabled
Container
Container tokens
TokenValue
Snackbar container colormd.comp.snackbar.container.color
#322F35
Snackbar container shadow colormd.comp.snackbar.container.shadow-color
#000000
Snackbar container elevationmd.comp.snackbar.container.elevation
6dp
Snackbar container shapemd.comp.snackbar.container.shape
4dp
Snackbar container with single line heightmd.comp.snackbar.with-single-line.container.height
48dp
Snackbar container with two lines heightmd.comp.snackbar.with-two-lines.container.height
68dp
Label text
Label text tokens
TokenValue
Snackbar label textmd.comp.snackbar.action.label-text.type
Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt
Snackbar label text colormd.comp.snackbar.action.label-text.color
#D0BCFF
Snackbar label text fontmd.comp.snackbar.action.label-text.font
Roboto
Snackbar label text line heightmd.comp.snackbar.action.label-text.line-height
20pt
Snackbar label text sizemd.comp.snackbar.action.label-text.size
14pt
Snackbar label text trackingmd.comp.snackbar.action.label-text.tracking
0.1pt
Snackbar label text weightmd.comp.snackbar.action.label-text.weight
500
Icon
Icon tokens
TokenValue
Snackbar icon colormd.comp.snackbar.icon.color
#F5EFF7
Snackbar icon sizemd.comp.snackbar.icon.size
24dp
Supporting text
Supporting text tokens
TokenValue
Snackbar supporting textmd.comp.snackbar.supporting-text.type
Roboto · 14pt · weight 400 · line height 20pt · tracking 0.25pt
Snackbar supporting text colormd.comp.snackbar.supporting-text.color
#F5EFF7
Snackbar supporting text fontmd.comp.snackbar.supporting-text.font
Roboto
Snackbar supporting text line heightmd.comp.snackbar.supporting-text.line-height
20pt
Snackbar supporting text sizemd.comp.snackbar.supporting-text.size
14pt
Snackbar supporting text trackingmd.comp.snackbar.supporting-text.tracking
0.25pt
Snackbar supporting text weightmd.comp.snackbar.supporting-text.weight
400
Hovered
Label text
Label text tokens
TokenValue
Snackbar hover label text colormd.comp.snackbar.action.hover.label-text.color
#D0BCFF
State layer
State layer tokens
TokenValue
Snackbar hover state layer colormd.comp.snackbar.action.hover.state-layer.color
#D0BCFF
Snackbar hover state layer opacitymd.comp.snackbar.action.hover.state-layer.opacity
8%
Snackbar icon hover state layer colormd.comp.snackbar.icon.hover.state-layer.color
#F5EFF7
Snackbar icon hover state layer opacitymd.comp.snackbar.icon.hover.state-layer.opacity
8%
Icon
Icon tokens
TokenValue
Snackbar icon hover icon colormd.comp.snackbar.icon.hover.icon.color
#F5EFF7
Focused
Label text
Label text tokens
TokenValue
Snackbar focus label text colormd.comp.snackbar.action.focus.label-text.color
#D0BCFF
State layer
State layer tokens
TokenValue
Snackbar focus state layer colormd.comp.snackbar.action.focus.state-layer.color
#D0BCFF
Snackbar focus state layer opacitymd.comp.snackbar.action.focus.state-layer.opacity
10%
Snackbar icon focus state layer colormd.comp.snackbar.icon.focus.state-layer.color
#F5EFF7
Snackbar icon focus state layer opacitymd.comp.snackbar.icon.focus.state-layer.opacity
10%
Icon
Icon tokens
TokenValue
Snackbar icon focus icon colormd.comp.snackbar.icon.focus.icon.color
#F5EFF7
Pressed (ripple)
Label text
Label text tokens
TokenValue
Snackbar pressed label text colormd.comp.snackbar.action.pressed.label-text.color
#D0BCFF
State layer
State layer tokens
TokenValue
Snackbar pressed state layer colormd.comp.snackbar.action.pressed.state-layer.color
#D0BCFF
Snackbar pressed state layer opacitymd.comp.snackbar.action.pressed.state-layer.opacity
10%
Snackbar icon pressed state layer colormd.comp.snackbar.icon.pressed.state-layer.color
#F5EFF7
Snackbar icon pressed state layer opacitymd.comp.snackbar.icon.pressed.state-layer.opacity
10%
Icon
Icon tokens
TokenValue
Snackbar icon pressed icon colormd.comp.snackbar.icon.pressed.icon.color
#F5EFF7