---
url: /components/snackbar/guidelines.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](specs.md) · **Guidelines** · [Accessibility](accessibility.md)
## Usage
Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen.
They shouldn't interrupt the user experience. People can browse the page content without being required to interact with the snackbar.
**Frequency**
Only one snackbar may be displayed at a time.
**Actions**
A snackbar can contain a single action. "Dismiss" or "cancel" actions are optional.
### Similar components
[Dialogs](../dialogs/overview.md "Dialogs provide important prompts in a user flow.") are also designed to show important messages.
Choose the right component based on the importance of the message. This component messaging strategy can help avoid overusing snackbars.
Dialogs require immediate action
**When to use snackbars**
Snackbars communicate messages that are minimally interruptive and don’t require user action.
| Component | Priority | User action |
| :-------: | :-----------: | :-------------------------------------------------------------------------------------------------------: |
| Snackbar | Low priority | Optional: Snackbars disappear automatically |
| Dialog | High priority | Required: Dialogs block app usage until the user takes a dialog action or exits the dialog (if available) |
### Accessibility requirements for web
On web, auto-dismissing snackbars are inaccessible for people with low vision or who require additional time to perceive information. This can be solved in 2 ways:
#### 1. Add inline feedback
Information in auto-dismissing snackbars must also be communicated using another accessible method inline or near the action that triggered the snackbar.
For example, update the label on a "Save" [button](../buttons/overview.md "Buttons let people take action and make choices with one tap.") to “Saved”, and trigger an auto-dismissing snackbar that communicates the same message.
#### 2. Make the snackbar actionable
Alternatively, add actions to the snackbar so it doesn't dismiss until acted on.
Also communicate snackbar information near the action that triggered the snackbar
## Anatomy
1. Container
2. Supporting text
3. Action (optional)
4. Close button (optional)
### Text label
Snackbars contain a text label that directly relates to the process being performed. In [compact breakpoints](../../foundations/layout/breakpoints/compact.md "Window widths smaller than 600dp, such as a phone in portrait orientation."), the text label can contain up to two lines of text.
Text labels are short, clear updates on processes that have been performed
::: tip Do
Keep the snackbar text label to one line long when possible
:::
::: tip Do
On mobile, the text label can be up to two lines long
:::
::: warning Caution
Avoid adding icons to snackbars. If your message needs an icon, consider using a different component such as a dialog.
:::
::: danger Don't
Avoid using stylized text or inline links in snackbars; they can add unwanted complexity. If your message needs a link, add a button instead, or use a different component.
:::
### Container
Snackbars are displayed in rectangular containers with a grey background. Containers should be completely opaque, so that text labels remain legible.
Snackbar containers use a solid background color with a shadow to stand out against content
::: danger Don't
The text label shouldn’t share the same color as the text button
:::
::: danger Don't
Don’t use a filled or elevated button in a snackbar, as it draws too much attention
:::
::: tip Do
In wide layouts, extend the container width to accommodate longer text labels
:::
::: warning Caution
An app can apply slight transparency to the container background, as long as text remains clearly legible
:::
::: danger Don't
Avoid significantly altering the shape of a snackbar container
:::
### Action
Snackbars can display a single text button that lets users take action on a process performed by the app. Snackbars shouldn’t be the only way to access a core use case, to make an app usable.
To distinguish the action from the text label, text buttons should display colored text
::: tip Do
If an action is long, it can be displayed on a third line
:::
::: tip Do
To allow users to amend choices, display an "Undo" action
:::
::: warning Caution
A dismiss action is unnecessary, as snackbar disappears on their own by default
:::
## Placement
### At the bottom of a UI
Snackbars should be placed at the bottom of a UI, in front of the main content. In some cases, snackbars can be nudged upwards to avoid overlapping with other UI elements near the bottom, such as [FABs](../floating-action-button/overview.md "Floating action buttons (FABs) help people take primary actions.") or docked toolbars.
Avoid placing a snackbar in front of frequently used touch targets or navigation.
::: tip Do
Place a snackbar in front of the main content
:::
::: danger Don't
Avoid placing snackbars in front of navigation components
:::
To ensure accessibility for keyboard users on the web, avoid positioning the snackbar in a way that completely obscures actionable elements. Blocking elements makes it difficult to know what is being focused and selected.
::: tip Do
Adjust the size of the snackbar to avoid blocking elements in focus
:::
::: danger Don't
Don’t let the snackbar fully cover elements in focus
:::
Snackbars can span the entire width of the screen only when a UI does not use persistent navigation components like app bars or [navigation bars](../navigation-bar/overview.md "Navigation bars let people switch between UI views on smaller devices.").
Snackbars that span the entire width of a UI can push up [FABs](../floating-action-button/overview.md "Floating action buttons (FABs) help people take primary actions.") when they appear.
::: warning Caution
Snackbars can span the entire width of a UI. However, they should not appear in front of navigation or other important UI elements like floating action buttons.
:::
**Snackbars and floating action buttons (FABs)**
Snackbars should appear above [FABs](../floating-action-button/overview.md "Floating action buttons (FABs) help people take primary actions.").
Snackbar above a FAB
::: danger Don't
Don’t place a snackbar in front of a FAB
:::
::: danger Don't
Don’t place a snackbar behind a FAB
:::
## Responsive layout
### Compact breakpoint
In [compact breakpoints](../../foundations/layout/breakpoints/compact.md "Window widths smaller than 600dp, such as a phone in portrait orientation."), snackbars should expand vertically from 48dp to 64dp to accommodate one or two lines of text, while maintaining a fixed distance from the leading, trailing, and bottom edges of the screen.
### Medium & expanded breakpoints
On [medium](../../foundations/layout/breakpoints/medium.md "Window widths from 600dp to 839dp, such as a tablet or foldable in portrait orientation.") and [expanded breakpoints](../../foundations/layout/breakpoints/expanded.md "Window widths 840dp to 1199dp, such as a tablet or foldable in landscape orientation, or desktop."), like tablet and desktop, snackbars should scale horizontally to accommodate longer text strings, keeping in mind that the ideal line length for text is typically between 40-60 characters.
Snackbars use a flexible distance from the trailing edge of the screen. Whenever possible, snackbars on medium and large displays should aim for a single line of text with an optional [button](../buttons/overview.md "Buttons let people take action and make choices with one tap.").
In wider [layouts](../../foundations/layout/layout-overview/overview.md "Layout is the visual arrangement of elements on the screen."), snackbars can be left-aligned or center-aligned if they are consistently placed on the same spot at the bottom of the screen.
Left-aligned snackbar
Center-aligned snackbar
::: danger Don't
Don’t place snackbars flush to one edge of the layout
:::
::: danger Don't
Don’t place consecutive snackbars side by side or next to one another
:::
## Behavior
### Appearing and disappearing
Snackbars appear without warning, but they don’t block users from interacting with page content.
Snackbars without actions can auto-dismiss after 4–10 seconds, depending on platform. Avoid using auto-dismissing snackbars on web unless there's also inline feedback.
Snackbars with actions should remain on the screen until the user takes an action on the snackbar, or dismisses it.
### Consecutive snackbars
Consecutive snackbars must appear one at a time.
Snackbars without actions appear and disappear automatically, while those with actions remain on screen until dismissed. However, a snackbar with updated information can immediately replace an outdated snackbar.
::: danger Don't
Don’t stack snackbars on top of one another
:::
::: danger Don't
Don’t animate other components along with snackbar animations, such as the floating action button
:::