Snackbar

A Snackbar displays a brief, temporary update about a process.

When to use

A Snackbar displays brief, temporary update about a process without interruption the user’s experience. It can be seen as a lightweight notification to quickly inform the user about something that has happened or will happen.

In short, use a Snackbar when:

  • Something has occurred that can help the user. For example: something has been processed, saved, added, deleted, archieved etc.
  • Something will occur/ be performed by the system
  • Something, initiated by the user, could not be performed. For example: something could not be processed, saved, added, deleted, archieved. Optionally a retry option could be added as an action.

A Snackbar always displayed a message with relatively low priority. When something has a high priority, other component like a Notification or doalog (alert) may be more relevant.


Sizing

A Snackbar is flexible in terms of sizing, as it adapts to its content. However, it does that to a certain point (a max-width) - set at 560px for readability purposes. When this limit it reached, a toast message may use multiple lines to display its message. Since a toast is a temporary, low priority message always try to keep the message as short as possible.

Overview / Sizing - AF

Positioning

By default, a Snackbar is placed at the bottom center to avoid disrupting the user experience.