Overview

#

Snackbars are short and affirmative messages that momentarily grab the user’s attention to convey non-critical information. They are transient and do not persist on the page.

Usage

#

Snackbars typically appear following an action taken by the user, and the contents of the snackbar should inform the user something about the results of an operation starting or completing successfully.

Snackbars should be located 24px from the bottom-left corner of the screen.

Only one snackbar should be visible at a time. If multiple snackbars need to appear, have them appear sequentially, replacing the previous snackbar.

Avoid using snackbars for critical information. It may be difficult for users with low dexterity or vision to access it. Consider using an alert banner or modal instead.

Snackbars can occasionally be used for other purposes. Some atypical use-cases include alerts for being signed out due to inactivity, or prompting the user to move on after completing a resource.

Inline buttons

#

Snackbars may occasionally include a button so the user can take a follow up, non-critical action. Common examples are 'undo' and 'retry'. Note that some users will never have the opportunity to click this button.

Text content

#

Snackbar messages should be concisely written sentence fragments. Examples include:

• Profile updated
• Changes saved
• Resource added

Avoid including user-inputted text such as the name of a resource or lesson because we have less control over the length of this text.

Specifications

#

• Background color: $k-grey-900
• Text: 14px white and bolded
• Height: 48px
• Min width: 344px
• Max width: 512px
• Focused state: brand.secondary.v_100
• Box shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.25);
• Corner radius: 4px
• Timeout: 4 seconds