Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. When they appear they shouldn’t interrupt the user experience and in most cases, they don't require user input to disappear.

Component checklist


Review required




We differentiate two types of snackbar according to how much of the user's attention is needed.

Informative snackbar

Usage - Types - Informative

The default snackbar informs the user about a process that the platform has performed or will perform. The message in a snackbar can be supplemented by an indicator, button, loading, or a combination of previous.

Alerting snackbar

Usage - Types - Alerting

The alerting snackbar is a visually more aggressive type of snackbar with two variants used as the background color, red and yellow. Alerting snackbars are mostly used to notify about a critical error or warning that can heavily disturb the user flow.



Usage - Anatomy
  1. Message
    The message should be short and easy to understand. In some cases, it can be supported by a hyperlink to show more information.
  2. Close button
    The close button is used to hide the snack bar. Clicking the button does not cancel the running process.
  3. Indicator
    The indicator supports the message state and helps users to better understand it.
  4. Loading
    Loading indicates that a process is running in the background.
  5. Confirmation button
    By default, the confirmation button is used as the primary button, with the default purpose of confirming a previous user action. If the action is the opposite (undo action), use a secondary button in a ghost variant.



Despite the type of content and message, we differentiate between several variants of the snackbar.

Usage - Variants
  1. Plain text
    The default variant of the snackbar is with a text message. The message can be supplemented by a CTA button. The close button is optional for this variant (i.e. the snackbar can disappear automatically without user action).
  2. Loading
    The loading snackbar tells the user that there is an action in progress in the background. After the action is done, the snackbar disappears and a snackbar with a green or red indicator appears. The snackbar must be closable (i.e. the snackbar must not disappear until the action is done, or the user manually closes it).
  3. Indicator
    We use two types of indicators, red and green. The red indicator indicates a failed action or error and it should contain a close or retry button in most cases. The green indicator indicates a successful action, eg. saving content to collection or publish content. For this variant, do not use a close button (i.e. the snackbar disappears automatically). You can use the “undo” button that returns the action you just performed.
  4. High attention
    The high attention snackbar notifies the user about critical errors and warnings. For this variant, we always used an alerting type of snackbar. The snackbar is closable (i.e. the snackbar does not disappear automatically and requires user action to close). It can be supplemented by a CTA button and/or hyperlink to show detailed information.



Appearing and disappearing

Snackbars appear without warning and don't require user interaction. They automatically disappear from the screen after a minimum of two seconds.

Maximum visibility time depends on the number of words. Each word should be visible 300ms to give enough time to users to read the whole message.

Example: If the platform shows a snackbar containing 12 words, the visibility time is calculated by the number of words multiplied by 300ms, meaning the snackbar should be visible for 3600ms.


The snackbar is positioned in the bottom-left corner and is always shown on top of the page content.

  • If the main navigation is expanded on a hover, it is shown over the snackbar.
  • If the multi-action bar is opened, the snackbar is moved more to the top to not overlay the bar.


Use the close button only if you really need the user to read the message, e.g. error snackbars, or if there is an action represented by a hyperlink or CTA button.

The only exception to using the close button is when we need to force the user to take an action. In this case, use a CTA button without the possibility of closing.


If we need to show multiple snackbars at the same time, we use stacking.

There are a few rules that have to be followed

  • Snackbars stack one above the other and they disappear according to the rules.
  • We show only three snackbars at the same time except in case of an error or warning message. Snackbars with an error or warning messages always remain visible and other snackbars are stacked above them.
  • Snackbars increase continuously until the queue is exhausted. If there is a snackbar with close or other action, it waits for the user to perform the action before continuing to hide the other snackbars.