Snackbar Dialog Component

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.

Default Snackbar

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

<aside
  aria-label="Notification"
  aria-live="polite"
  aria-modal="false"
  class="snackbar-dialog snackbar-dialog--transition"
  role="dialog"
  hidden
>
  <div class="snackbar-dialog__window">
    <div class="snackbar-dialog__main">
      <p>1 item deleted from watch list.</p>
    </div>
  </div>
</aside>

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 .

<aside
  aria-label="Notification"
  aria-live="polite"
  aria-modal="false"
  class="snackbar-dialog snackbar-dialog--transition"
  role="dialog"
  hidden
>
  <div class="snackbar-dialog__window">
    <div class="snackbar-dialog__main">
      <p>1 item deleted from watch list.</p>
    </div>
    <div class="snackbar-dialog__actions">
      <button accesskey="u" class="fake-link snackbar-dialog__cta">
        Undo
        <span class="clipped"> - Access Key: U </span>
      </button>
    </div>
  </div>
</aside>

Stacked Snackbar

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

<aside
  aria-label="Notification"
  aria-live="polite"
  aria-modal="false"
  class="snackbar-dialog snackbar-dialog--transition"
  role="dialog"
  hidden
>
  <div class="snackbar-dialog__window snackbar-dialog__window--column">
    <div class="snackbar-dialog__main">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </div>
    <div class="snackbar-dialog__actions">
      <button accesskey="u" class="fake-link snackbar-dialog__cta">
        Undo
        <span class="clipped"> - Access Key: U </span>
      </button>
    </div>
  </div>
</aside>