Toast Dialog Component

The display of the toast 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 toast-dialog--transition modifier class will opt into a transition that slides in on show, and fades out on hide.

Default Toast

The default toast displays a single, primary call-to-action.

<aside
  aria-label="Notification"
  aria-live="polite"
  aria-modal="false"
  class="toast-dialog toast-dialog--transition"
  hidden
  role="dialog"
>
  <div class="toast-dialog__window">
    <div class="toast-dialog__header">
      <h2 class="toast-dialog__title">User Privacy Preferences</h2>
      <button
        class="icon-btn icon-btn--transparent toast-dialog__close"
        type="button"
        aria-label="Close notification dialog"
      >
        <svg class="icon icon--close icon--16">
          <use href="#icon-close-16" />
        </svg>
      </button>
    </div>
    <div class="toast-dialog__main">
      <p>
        We detected something unusual about a recent sign-in to your eBay
        account. To help keep you safe, we recommend you change the password.
      </p>
    </div>
    <div class="toast-dialog__footer">
      <button accesskey="v" class="btn btn--primary toast-dialog__cta">
        View Account
      </button>
    </div>
  </div>
</aside>

Toast Secondary Action

A secondary action is also supported.

<aside
  aria-label="Notification"
  aria-live="polite"
  aria-modal="false"
  class="toast-dialog toast-dialog--transition"
  hidden
  role="dialog"
>
  <div class="toast-dialog__window">
    <div class="toast-dialog__header">
      <h2 class="toast-dialog__title">User Privacy Preferences</h2>
      <button
        class="icon-btn icon-btn--transparent toast-dialog__close"
        type="button"
        aria-label="Close notification dialog"
      >
        <svg class="icon icon--close icon--16">
          <use href="#icon-close-16" />
        </svg>
      </button>
    </div>
    <div class="toast-dialog__main">
      <p>
        We detected something unusual about a recent sign-in to your eBay
        account. To help keep you safe, we recommend you change the password.
      </p>
    </div>
    <div class="toast-dialog__footer">
      <button accesskey="l" class="btn btn--secondary">Later</button>
      <button accesskey="v" class="btn btn--primary toast-dialog__cta">
        View Account
      </button>
    </div>
  </div>
</aside>