---
url: /components/snackbar/specs.md
description: >-
  Snackbars provide brief messages about app processes at the bottom of the
  screen.
---

# Snackbar

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

[Overview](overview.md) · **Specs** · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)

![Diagram of snackbar indicating the four parts of its anatomy](/assets/ce2f7922-mkvpjhzt-01-3p.CYm0EyfZ.webp)

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](../../foundations/design-tokens/overview.md)

::: token-table token-table-346ae12a744b45dd-e15cc2b2
**Snackbar tokens** · 1 token set · 40 tokens · [live token table](https://m3.material.io/components/snackbar/specs) · 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<br>font names: `md.comp.snackbar.action.label-text.font` → `md.sys.typescale.label-large.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.snackbar.action.label-text.weight` → `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.comp.snackbar.action.label-text.size` → `md.sys.typescale.label-large.size`<br>line height: `md.comp.snackbar.action.label-text.line-height` → `md.sys.typescale.label-large.line-height`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>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<br>font names: `md.comp.snackbar.supporting-text.font` → `md.sys.typescale.body-medium.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.snackbar.supporting-text.weight` → `md.sys.typescale.body-medium.weight` → `md.ref.typeface.weight-regular`<br>font size: `md.comp.snackbar.supporting-text.size` → `md.sys.typescale.body-medium.size`<br>line height: `md.comp.snackbar.supporting-text.line-height` → `md.sys.typescale.body-medium.line-height`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.neutral100`<br>High contrast: `#FFFFFF` via `md.ref.palette.neutral100` |
:::

## 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)

![Diagram of snackbar indicating color and inverse text and labels](/assets/568d9011-lxlhysf9-2.Cjd7cjWy.webp)

Snackbar color roles used for light and dark schemes:

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

## Measurements

![Diagram of snackbar with action](/assets/6636083d-m8otc9es-3-3p.D3kMLHOw.webp)

Snackbar padding and size measurements

## Configurations

![5 snackbar configurations.](/assets/14347e90-lxli48dd-5.CT0kMJOd.webp)

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