Snackbars provide brief messages about app processes at the bottom of the screen.
Android check Web Flutter iOS
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, and they don’t require user input to disappear.
Frequency
Only one snackbar may be displayed at a time.
Actions
A snackbar can contain a single action. "Dismiss" or "cancel" actions are optional.
Snackbars appear temporarily, and disappear on their own without requiring user input to be dismissed.
Contextual
Snackbars are placed in the most suitable area of the UI.
When to use
Snackbars communicate messages that are minimally interruptive and don’t require user action. Component Priority User action Snackbar Low priority Optional: Snackbars disappear automatically Banner Prominent,...
Snackbars communicate messages that are minimally interruptive and don’t require user action.
Component
Priority
User action
Snackbar
Low priority
Optional: Snackbars disappear automatically
Banner
Prominent, medium priority
Optional: Banners remain until dismissed by the user, or if the state that caused the banner is resolved
Dialog
Highest priority
Required: Dialogs block app usage until the user takes a dialog action or exits the dialog (if available)
Anatomy
Text label
Snackbars contain a text label that directly relates to the process being performed. On mobile, the text label can contain up to two lines of...
Snackbars contain a text label that directly relates to the process being performed. On mobile, the text label can contain up to two lines of text.
Container
Snackbars are displayed in rectangular containers with a grey background. Containers should be completely opaque, so that text labels remain legible.
Snackbars are displayed in rectangular containers with a grey background. Containers should be completely opaque, so that text labels remain legible.
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...
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.
Behavior
Appearing and disappearing
Snackbars appear without warning, and don't require user interaction. They automatically disappear from the screen after a minimum of four seconds, and a maximum of...
Snackbars appear without warning, and don't require user interaction. They automatically disappear from the screen after a minimum of four seconds, and a maximum of ten seconds.
Consecutive snackbars
When multiple snackbar updates are necessary, they should appear one at a time.
When multiple snackbar updates are necessary, they should appear one at a time.
Scaling and adaptation
Size constraints
On small screens, 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.
On medium and large screens, 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.
Placement
At the bottom of the UI
Snackbars should be placed at the bottom of a UI, in front of app content. Avoid placing a snackbar in front of frequently used touch targets or navigation.
Snackbars can span the entire width of the screen only when a UI does not use persistent navigation components like app bars or bottom navigation bars. Snackbars that span the entire width of a UI can push only FABs up when they appear.
Snackbars and floating action buttons (FABs)
Snackbars should appear above FABs.
Snackbars should appear above FABs.
Snackbars and persistent footer elements
Snackbars should appear directly above persistent footer elements.
Snackbars should appear directly above persistent footer elements.
Snackbars in wide layouts
In wide layouts, snackbars can be left-aligned or center-aligned if they are consistently placed on the same spot at the bottom of the screen.
In wide layouts, snackbars can be left-aligned or center-aligned if they are consistently placed on the same spot at the bottom of the screen.
Before you can use Material snackbars, you need to add a dependency to the
Material Components for Android library. For more information, go to the
Getting started
page.
The Snackbar class provides static make methods to produce a snackbar
configured in the desired way. These methods take a View, which will be used
to find a suitable ancestor ViewGroup to display the snackbar in, a text
string to display, and a duration to display the snackbar for. A suitable
ancestor ViewGroup will be either the nearest CoordinatorLayout to the
View passed in, or the root DecorView if none could be found.
Available duration presets are:
LENGTH_INDEFINITE (Show the snackbar until it's either dismissed or
another snackbar is shown)
LENGTH_LONG (Show the snackbar for a long period of time)
LENGTH_SHORT (Show the snackbar for a short period of time)
Note: Snackbars work best if they are displayed inside of a
CoordinatorLayout.
CoordinatorLayout allows the snackbar to enable behavior like
swipe-to-dismiss, as well as automatically moving widgets like
FloatingActionButton.
Making snackbars accessible
Snackbars support content labeling for accessibility and are readable by most
screen readers, such as TalkBack. Text rendered in snackbars is automatically
provided to accessibility services. Additional content labels are usually
unnecessary.
Showing a snackbar
Calling make creates the snackbar, but doesn't cause it to be visible on the
screen. To show it, use the show method on the returned Snackbar instance.
Note that only one snackbar will be shown at a time. Showing a new snackbar will
dismiss any previous ones first.
To show a snackbar with a message and no action:
xxxxxxxxxx
Adding an action
To add an action, use the setAction method on the object returned from make.
Snackbars are automatically dismissed when the action is clicked.
To show a snackbar with a message and an action:
xxxxxxxxxx
Anchoring a snackbar
By default, Snackbars will be anchored to the bottom edge of their parent
view. However, you can use the setAnchorView method to make a Snackbar
appear above a specific view within your layout, e.g. a FloatingActionButton.
xxxxxxxxxx
This is especially helpful if you would like to place a Snackbar above
navigational elements at the bottom of the screen, such as a BottomAppBar or
BottomNavigationView.
Related concepts
Temporary bottom bars with other sorts of content layouts can be implemented by
subclassing
BaseTransientBottomBar.
Android also provides a
Toast class
with a similar API that can be used for displaying system-level notifications.
Generally, snackbars are the preferred mechanism for displaying feedback
messages to users, as they can be displayed in the context of the UI where the
action occurred. Reserve Toast for cases where this cannot be done.
Snackbar
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, and they don’t require user input to disappear.
They disappear either after a timeout or after a user interaction elsewhere on
the screen, but can also be swiped off the screen.
Snackbars can also offer the ability to perform an action, such as undoing an
action that was just taken, or retrying an action that had failed.
Action buttons with long text should be positioned below the label instead of alongside it. This can be accomplished by adding the mdc-snackbar--stacked modifier class to the root element:
xxxxxxxxxx
Alternatively, you can call the layout-stacked mixin from Sass:
xxxxxxxxxx
Leading (tablet and desktop only)
By default, snackbars are centered horizontally within the viewport.
On larger screens, they can optionally be displayed on the leading edge of the screen (the left side in LTR, or the right side in RTL) by adding the mdc-snackbar--leading modifier class to the root element:
xxxxxxxxxx
Alternatively, you can call the position-leading mixin from Sass:
xxxxxxxxxx
Wide (tablet and desktop only)
To increase the margins between the snackbar and the viewport on larger screens, call the viewport-margin mixin inside a media query:
xxxxxxxxxx
Style Customization
CSS Classes
CSS Class
Description
mdc-snackbar
Mandatory. Container for the snackbar elements.
mdc-snackbar__label
Mandatory. Message text.
mdc-snackbar__actions
Optional. Wraps the action button/icon elements, if present.
mdc-snackbar__action
Optional. The action button.
mdc-snackbar__dismiss
Optional. The dismiss ("X") icon.
mdc-snackbar--opening
Optional. Applied automatically when the snackbar is in the process of animating open.
mdc-snackbar--open
Optional. Indicates that the snackbar is open and visible.
mdc-snackbar--closing
Optional. Applied automatically when the snackbar is in the process of animating closed.
mdc-snackbar--leading
Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.
mdc-snackbar--stacked
Optional. Positions the action button/icon below the label instead of alongside it.
Sass Mixins
Mixin
Description
fill-color($color)
Sets the fill color of the snackbar.
label-ink-color($color)
Sets the color of the snackbar's label text.
shape-radius($radius, $rtl-reflexive)
Sets the rounded shape to snackbar surface with given radius size. Set $rtl-reflexive to true to flip radius values in RTL context, defaults to false.
min-width($min-width, $mobile-breakpoint)
Sets the min-width of the surface on tablet/desktop devices. On mobile, the width is automatically set to 100%.
max-width($max-width)
Sets the max-width of the snackbar.
elevation($z-index)
Sets the elevation of the snackbar.
viewport-margin($margin)
Sets the distance between the snackbar and the viewport.
z-index($z-index)
Sets the z-index of the snackbar.
position-leading()
Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered.
layout-stacked()
Positions the action button/icon below the label instead of alongside it.
NOTE: The mdc-snackbar__action and mdc-snackbar__dismiss elements can be further customized with mdc-button and mdc-icon-button mixins.
JavaScript API
MDCSnackbar Properties
Property
Value Type
Description
isOpen
boolean (read-only)
Gets whether the snackbar is currently open.
timeoutMs
number
Gets/sets the automatic dismiss timeout in milliseconds. Value must be between 4000 and 10000 (or -1 to disable the timeout completely) or an error will be thrown. Defaults to 5000 (5 seconds).
closeOnEscape
boolean
Gets/sets whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to true.
labelText
string
Gets/sets the textContent of the label element.
actionButtonText
string
Gets/sets the textContent of the action button element.
NOTE: Setting labelText while the snackbar is open will cause screen readers to announce the new label. See Screen Readers below for more information.
MDCSnackbar Methods
Method Signature
Description
open() => void
Opens the snackbar.
close(reason: string=) => void
Closes the snackbar, optionally with the specified reason indicating why it was closed.
Events
Event Name
event.detail
Description
MDCSnackbar:opening
{}
Indicates when the snackbar begins its opening animation.
MDCSnackbar:opened
{}
Indicates when the snackbar finishes its opening animation.
MDCSnackbar:closing
{reason?: string}
Indicates when the snackbar begins its closing animation. reason contains the reason why the snackbar closed ('dismiss', 'action', or undefined).
MDCSnackbar:closed
{reason?: string}
Indicates when the snackbar finishes its closing animation. reason contains the reason why the snackbar closed ('dismiss', 'action', or undefined).
Usage Within Frameworks
If you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.
MDCSnackbarAdapter Methods
Method Signature
Description
addClass(className: string) => void
Adds a class to the root element.
removeClass(className: string) => void
Removes a class from the root element.
announce() => void
Announces the snackbar's label text to screen reader users.
notifyOpening() => void
Broadcasts an event denoting that the snackbar has just started opening.
notifyOpened() => void
Broadcasts an event denoting that the snackbar has finished opening.
notifyClosing(reason: string) => void
Broadcasts an event denoting that the snackbar has just started closing. If a non-empty reason is passed, the event's detail object should include its value in the reason property.
notifyClosed(reason: string) => void
Broadcasts an event denoting that the snackbar has finished closing. If a non-empty reason is passed, the event's detail object should include its value in the reason property.
MDCSnackbarFoundation Methods
Method Signature
Description
open()
Opens the snackbar.
close(action: string)
Closes the snackbar, optionally with the specified action indicating why it was closed.
isOpen() => boolean
Returns whether the snackbar is open.
getTimeoutMs() => number
Returns the automatic dismiss timeout in milliseconds.
setTimeoutMs(timeoutMs: number)
Sets the automatic dismiss timeout in milliseconds. Value must be between 4000 and 10000 or an error will be thrown.
getCloseOnEscape() => boolean
Returns whether the snackbar closes when it is focused and the user presses the ESC key.
setCloseOnEscape(closeOnEscape: boolean) => void
Sets whether the snackbar closes when it is focused and the user presses the ESC key.
handleKeyDown(event: KeyEvent)
Handles keydown events on or within the snackbar's root element.
handleActionButtonClick(event: MouseEvent)
Handles click events on or within the action button.
handleActionIconClick(event: MouseEvent)
Handles click events on or within the dismiss icon.
Event Handlers
When wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:
Event
Target
Foundation Handler
Register
Deregister
keydown
.mdc-snackbar
handleKeyDown
During initialization
During destruction
click
.mdc-snackbar__action
handleActionButtonClick
During initialization
During destruction
click
.mdc-snackbar__dismiss
handleActionIconClick
During initialization
During destruction
The Util API
External frameworks and libraries can use the following utility methods from the util module when implementing their own component.
Snackbars automatically announce their label text to screen reader users with a "polite" notification when open() is called.
However, screen readers only announce ARIA Live Regions when the element's textContentchanges, so MDC Snackbar provides a util.announce() method to temporarily clear and then restore the label element's textContent.
NOTE: Setting labelText while the snackbar is open will cause screen readers to announce the new label.
util.announce() supports the latest versions of the following screen readers and browsers:
Snackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.
Dismiss Key
Pressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.
To disable this behavior, set closeOnEscape to false.
No JS Ripples
The mdc-snackbar__action and mdc-snackbar__dismiss elements should not have JavaScript-enabled MDCRipple behavior.
When combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.
No Web implementation guidance available
Using snackbars
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, and they don’t require user input to disappear.
The following is an example of a snackbar with an action button that uses the Material.io Shrine color theming::
xxxxxxxxxx
No Flutter implementation guidance available
On July 15, 2021, Material's iOS libraries will enter maintenance mode. Learn more.
Using snackbars
Installing
To use snackbars in your app, first add the following to your Podfile:
xxxxxxxxxx
Then, run the following command:
xxxxxxxxxx
From there, import the relevant target or file.
Swift
xxxxxxxxxx
Objective-C
xxxxxxxxxx
Making snackbars accessible
VoiceOver
Snackbars have automatic VoiceOver support through UIKit, but MDCSnackbarMessageView also exposes accessibilityLabel and accessibilityHint properties for overriding the default values.
Dynamic Type
MDCSnackbarMessageView has a mdc_adjustsFontForContentSizeCategory property that is modeled after Apple's adjustsFontForContentSizeCategory property. Set this property to YES for font scaling according to the current trait environment.
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, and they don’t require user input to disappear.
Displaying a snackbar involves two classes: MDCSnackbarManager and MDCSnackbarMessage.
First, create an instance of MDCSnackbarMessage and provide a string to display to the user. Next,
pass the MDCSnackbarMessage to MDCSnackbarManager.defaultManager with the static -showMessage: method. This will
automatically construct an MDCSnackbarMessageView and appropriate overlay views so the snackbar is
visible to the user.
Snackbar manager can be instructed to suspend and resume displaying messages as needed. When
messages are suspended the manager provides a suspension token that the client must keep as long as
messages are suspended. When the client releases the suspension token or calls the manager's resume
method with the suspension token, then messages will resume being displayed.
Snackbar
The following is an example of a snackbar with a message and an action button:
Swift
xxxxxxxxxx
Objective-C
xxxxxxxxxx
Snackbar anatomy and key properties
The following is an anatomy diagram of a snackbar: