A snackbar is a non-modal dialog that appears in response to a lightweight user action. It dissapears automatically after a minimum of 6 seconds.

The display of the snackbar should be toggled using the hidden property. Please refer to the Dialog Transitions section for information on how to correctly trigger a CSS transition from a hidden state. With the correct JavaScript in place, applying the snackbar-dialog--transition modifier class will opt into a transition that slides in on show, and fades out on hide.

NOTE : A toast is non-modal and therefore should not capture or trap keyboard focus when opened.

Default Snackbar

The default snackbar displays a short, non-interactive message.

Action Snackbar

A snackbar can contain a single shortcut action. Typically this is an "undo".

In order to give all users adequate time to find and reach the action, the snackbar DOM position must be placed closely after the users current location (i.e. document.activeElement ). This ensures a natual reading and keyboard order. In addition, an accesskey attribute allows quick access via the operating system's access keys .

Stacked Snackbar

The content and action can be stacked vertically by using the snackbar-dialog__window--column modifier.