Material Design


Open bugs badge

Snackbars provide brief feedback about an operation through a message at the bottom of the screen. Snackbars contain up to two lines of text directly related to the operation performed. They may contain a text action, but no icons.


Design & API documentation

Table of contents


Snackbar Manager and Message

Snackbar is comprised of two classes: MDCSnackbarManager and MDCSnackbarMessage. Snackbar messages contain text to be displayed to a user. Messages are passed to the manager. The manager decides when it is appropriate to show a message to the user.

Suspending and Resuming Display of Messages

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.


Installation with CocoaPods

Add the following to your Podfile:

pod 'MaterialComponents/Snackbar'

Then, run the following command:

pod install


To import the component:


import MaterialComponents.MaterialSnackbar


#import "MaterialSnackbar.h"


Displaying a snackbar requires using 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 the MDCSnackbarManager with the static showMessage method. This will automatically construct an MDCSnackbarMessageView and appropriate overlay views so the snackbar is visible to the user.

Typical use: display a message


let message = MDCSnackbarMessage()
message.text = "The groundhog (Marmota monax) is also known as a woodchuck or whistlepig."


MDCSnackbarMessage *message = [[MDCSnackbarMessage alloc] init];
message.text = @"How much wood would a woodchuck chuck if a woodchuck could chuck wood?";
[MDCSnackbarManager showMessage:message];

Typical use: display a message with an action


let action = MDCSnackbarMessageAction()
let actionHandler = {() in
  let answerMessage = MDCSnackbarMessage()
  answerMessage.text = "Fascinating"
action.handler = actionHandler
action.title = "OK"
message.action = action


MDCSnackbarMessageAction *action = [[MDCSnackbarMessageAction alloc] init];
void (^actionHandler)() = ^() {
  MDCSnackbarMessage *answerMessage = [[MDCSnackbarMessage alloc] init];
  answerMessage.text = @"A lot";
  [MDCSnackbarManager showMessage:answerMessage];
action.handler = actionHandler;
action.title = @"Answer";
message.action = action;


Color Theming

There is currently no theing extension for MDCSnackbar.

Typography Theming

You can theme an snackbar with your app’s typography scheme using the TypographyThemer extension.

You must first add the Typography Themer extension to your project:

pod 'MaterialComponents/Snackbar+TypographyThemer'


// Step 1: Import the TypographyThemer extension
import MaterialComponents.MaterialSnackbar_TypographyThemer

// Step 2: Create or get a typography scheme
let typographyScheme = MDCTypographyScheme()

// Step 3: Apply the typography scheme to your component


// Step 1: Import the TypographyThemer extension
#import "MaterialSnackbar+TypographyThemer.h"

// Step 2: Create or get a typography scheme
id<MDCTypographyScheming> typographyScheme = [[MDCTypographyScheme alloc] init];

// Step 3: Apply the typography scheme to your component
[MDCSnackbarTypographyThemer applyTypographyScheme:colorScheme];