Snackbar

Snackbars provide brief messages about app processes at the bottom of the screen.

Overview · Specs · Guidelines · Accessibility

1. Container
2. Icon (optional close affordance)
3. Action (optional)
4. Supporting text

Tokens and specs

Browse the component elements, attributes, tokens, and their values. Learn more about design tokens

Design tokens

Token table

Machine-readable relationship table

Snackbar tokens · 1 token set · 40 tokens · live token table · DSDB TOKEN_TABLE.346ae12a744b45dd

• Default context: Theme: Light · Platform: Android · Audience: 3P · Font: Static · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default
• Not configurable here (group default used): Motion scheme: Standard · 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.

Snackbars · md.comp.snackbar · 40 tokens

For snackbars.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Enabled › Container	md.comp.snackbar.container.color	Color	md.sys.color.inverse-surface → md.ref.palette.neutral20	#322F35	Dark: #E6E0E9 via md.ref.palette.neutral90
Enabled › Container	md.comp.snackbar.container.shadow-color	Color	md.sys.color.shadow → md.ref.palette.neutral0	#000000	—
Enabled › Container	md.comp.snackbar.container.elevation	Elevation	md.sys.elevation.level3	6dp	—
Enabled › Container	md.comp.snackbar.container.shape	Shape	md.sys.shape.corner.extra-small	Rounded corners 4dp	—
Enabled › Container	md.comp.snackbar.with-single-line.container.height	Length	—	48dp	—
Enabled › Container	md.comp.snackbar.with-two-lines.container.height	Length	—	68dp	—
Enabled › Label text	md.comp.snackbar.action.label-text.color	Color	md.sys.color.inverse-primary → md.ref.palette.primary80	#D0BCFF	Dark: #6750A4 via md.ref.palette.primary40
Enabled › Label text	md.comp.snackbar.action.label-text.font	Font names	md.sys.typescale.label-large.font → md.ref.typeface.plain	Roboto	—
Enabled › Label text	md.comp.snackbar.action.label-text.line-height	Line height	md.sys.typescale.label-large.line-height	20pt	—
Enabled › Label text	md.comp.snackbar.action.label-text.size	Font size	md.sys.typescale.label-large.size	14pt	—
Enabled › Label text	md.comp.snackbar.action.label-text.tracking	Font tracking	md.sys.typescale.label-large.tracking	0.1pt	—
Enabled › Label text	md.comp.snackbar.action.label-text.weight	Font weight	md.sys.typescale.label-large.weight → md.ref.typeface.weight-medium	500	—
Enabled › Label text	md.comp.snackbar.action.label-text.type	Typography	composite font names: md.comp.snackbar.action.label-text.font → md.sys.typescale.label-large.font → md.ref.typeface.plain font weight: md.comp.snackbar.action.label-text.weight → md.sys.typescale.label-large.weight → md.ref.typeface.weight-medium font size: md.comp.snackbar.action.label-text.size → md.sys.typescale.label-large.size line height: md.comp.snackbar.action.label-text.line-height → md.sys.typescale.label-large.line-height font tracking: md.comp.snackbar.action.label-text.tracking → md.sys.typescale.label-large.tracking	Roboto · weight 500 · size 14pt · line height 20pt · tracking 0.1pt	—
Enabled › Icon	md.comp.snackbar.icon.color	Color	md.sys.color.inverse-on-surface → md.ref.palette.neutral95	#F5EFF7	Dark: #322F35 via md.ref.palette.neutral20 Medium contrast: #FFFFFF via md.ref.palette.neutral100 High contrast: #FFFFFF via md.ref.palette.neutral100
Enabled › Icon	md.comp.snackbar.icon.size	Length	—	24dp	—
Enabled › Supporting text	md.comp.snackbar.supporting-text.color	Color	md.sys.color.inverse-on-surface → md.ref.palette.neutral95	#F5EFF7	Dark: #322F35 via md.ref.palette.neutral20 Medium contrast: #FFFFFF via md.ref.palette.neutral100 High contrast: #FFFFFF via md.ref.palette.neutral100
Enabled › Supporting text	md.comp.snackbar.supporting-text.font	Font names	md.sys.typescale.body-medium.font → md.ref.typeface.plain	Roboto	—
Enabled › Supporting text	md.comp.snackbar.supporting-text.line-height	Line height	md.sys.typescale.body-medium.line-height	20pt	—
Enabled › Supporting text	md.comp.snackbar.supporting-text.size	Font size	md.sys.typescale.body-medium.size	14pt	—
Enabled › Supporting text	md.comp.snackbar.supporting-text.tracking	Font tracking	md.sys.typescale.body-medium.tracking	0.25pt	—
Enabled › Supporting text	md.comp.snackbar.supporting-text.weight	Font weight	md.sys.typescale.body-medium.weight → md.ref.typeface.weight-regular	400	—
Enabled › Supporting text	md.comp.snackbar.supporting-text.type	Typography	composite font names: md.comp.snackbar.supporting-text.font → md.sys.typescale.body-medium.font → md.ref.typeface.plain font weight: md.comp.snackbar.supporting-text.weight → md.sys.typescale.body-medium.weight → md.ref.typeface.weight-regular font size: md.comp.snackbar.supporting-text.size → md.sys.typescale.body-medium.size line height: md.comp.snackbar.supporting-text.line-height → md.sys.typescale.body-medium.line-height font tracking: md.comp.snackbar.supporting-text.tracking → md.sys.typescale.body-medium.tracking	Roboto · weight 400 · size 14pt · line height 20pt · tracking 0.25pt	—
Hovered › Label text	md.comp.snackbar.action.hover.label-text.color	Color	md.sys.color.inverse-primary → md.ref.palette.primary80	#D0BCFF	Dark: #6750A4 via md.ref.palette.primary40
Hovered › State layer	md.comp.snackbar.action.hover.state-layer.color	Color	md.sys.color.inverse-primary → md.ref.palette.primary80	#D0BCFF	Dark: #6750A4 via md.ref.palette.primary40
Hovered › State layer	md.comp.snackbar.action.hover.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Hovered › State layer	md.comp.snackbar.icon.hover.state-layer.color	Color	md.sys.color.inverse-on-surface → md.ref.palette.neutral95	#F5EFF7	Dark: #322F35 via md.ref.palette.neutral20 Medium contrast: #FFFFFF via md.ref.palette.neutral100 High contrast: #FFFFFF via md.ref.palette.neutral100
Hovered › State layer	md.comp.snackbar.icon.hover.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Hovered › Icon	md.comp.snackbar.icon.hover.icon.color	Color	md.sys.color.inverse-on-surface → md.ref.palette.neutral95	#F5EFF7	Dark: #322F35 via md.ref.palette.neutral20 Medium contrast: #FFFFFF via md.ref.palette.neutral100 High contrast: #FFFFFF via md.ref.palette.neutral100
Focused › Label text	md.comp.snackbar.action.focus.label-text.color	Color	md.sys.color.inverse-primary → md.ref.palette.primary80	#D0BCFF	Dark: #6750A4 via md.ref.palette.primary40
Focused › State layer	md.comp.snackbar.action.focus.state-layer.color	Color	md.sys.color.inverse-primary → md.ref.palette.primary80	#D0BCFF	Dark: #6750A4 via md.ref.palette.primary40
Focused › State layer	md.comp.snackbar.action.focus.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Focused › State layer	md.comp.snackbar.icon.focus.state-layer.color	Color	md.sys.color.inverse-on-surface → md.ref.palette.neutral95	#F5EFF7	Dark: #322F35 via md.ref.palette.neutral20 Medium contrast: #FFFFFF via md.ref.palette.neutral100 High contrast: #FFFFFF via md.ref.palette.neutral100
Focused › State layer	md.comp.snackbar.icon.focus.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Focused › Icon	md.comp.snackbar.icon.focus.icon.color	Color	md.sys.color.inverse-on-surface → md.ref.palette.neutral95	#F5EFF7	Dark: #322F35 via md.ref.palette.neutral20 Medium contrast: #FFFFFF via md.ref.palette.neutral100 High contrast: #FFFFFF via md.ref.palette.neutral100
Pressed (ripple) › Label text	md.comp.snackbar.action.pressed.label-text.color	Color	md.sys.color.inverse-primary → md.ref.palette.primary80	#D0BCFF	Dark: #6750A4 via md.ref.palette.primary40
Pressed (ripple) › State layer	md.comp.snackbar.action.pressed.state-layer.color	Color	md.sys.color.inverse-primary → md.ref.palette.primary80	#D0BCFF	Dark: #6750A4 via md.ref.palette.primary40
Pressed (ripple) › State layer	md.comp.snackbar.action.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
Pressed (ripple) › State layer	md.comp.snackbar.icon.pressed.state-layer.color	Color	md.sys.color.inverse-on-surface → md.ref.palette.neutral95	#F5EFF7	Dark: #322F35 via md.ref.palette.neutral20 Medium contrast: #FFFFFF via md.ref.palette.neutral100 High contrast: #FFFFFF via md.ref.palette.neutral100
Pressed (ripple) › State layer	md.comp.snackbar.icon.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
Pressed (ripple) › Icon	md.comp.snackbar.icon.pressed.icon.color	Color	md.sys.color.inverse-on-surface → md.ref.palette.neutral95	#F5EFF7	Dark: #322F35 via md.ref.palette.neutral20 Medium contrast: #FFFFFF via md.ref.palette.neutral100 High contrast: #FFFFFF via md.ref.palette.neutral100

Color

Color values are implemented through design tokens. 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

Snackbar color roles used for light and dark schemes:

1. Inverse surface
2. Inverse on surface
3. Inverse primary
4. Inverse on surface

Measurements

Snackbar padding and size measurements

Configurations

1. Single line
2. Single line with action
3. Two lines
4. Two lines with action
5. Two lines with longer action