Snackbar

Component checklist

Types

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

Informative snackbar

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

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.

 

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.

 

Variants

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

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.

 

Behavior

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.

Position

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.

Closability

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.

Stacking

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.