Snackbars & Toasts

Snackbars provide brief messages about app processes at the bottom of the screen. Snackbar component is a container used to notify a user of an operation's status.

It displays at the bottom of the screen. A snackbar may contain an action button to execute

a command for the user. Actions should not be to close the snackbar.

By not providing an action, the snackbar becomes a toast component.

When multiple snackbars/toasts are fired, they wait in queue (we do not display multiple at the same time).

Basic structure

<button id="snack-info" type="button" class="btn btn--action">Info</button>
<button id="snack-success" type="button" class="btn btn--primary">Success</button>
<button id="snack-warn" type="button" class="btn btn--secondary">Warning</button>
<button id="snack-error" type="button" class="btn btn--danger">Error</button>

Example

Simple button that triggers toast.

  <button id="snack-info" type="button" class="btn btn--action">Info</button>
  <button id="snack-success" type="button" class="btn btn--primary">Success</button>
  <button id="snack-warn" type="button" class="btn btn--secondary">Warning</button>
  <button id="snack-error" type="button" class="btn btn--danger">Error</button>

Usage Guideline

First, make sure you have loaded snackbar.js library.

To create snackbar, use Snackbar() function which accepts following options:

Shortcut functions

If you need just to present text at different levels, you can create snackbar with function which accepts text and options as parameters.

  Snackbar.info("Text");
  Snackbar.warn("Text", {duration: 4000});
  Snackbar.success("Text");
  Snackbar.error("Text", {});

Design guidelines

Initial inspiration from Material Design.