Components

Toasts

Toasts are event/state triggered components designed to give a user information on the state of the system and instructions on how to move forward or resolve issues.

Quick look

A few things to keep in mind when using toasts:

  1. Toasts have 3 states: confirmation, caution and action needed.
  2. Toasts to not displace the page when they appear. They fade in under the top bar over the content below.
  3. Each type of toast has specific uses...
    • Confirmation toasts: Always manually dismissible. Can be on a timer which auto dismisses them after N seconds of non-focus/hover. Focus/hover resets that timer. The workspace is interactive when present. Leaving the context dismisses the toast.
    • Caution toasts: Optionally manually dismissible. Cannot be on a timer. The workspace is optionally interactive when present. Leaving the context does NOT dismiss the toast (i.e. the toast follows you).
    • Action needed toasts: Never manually dismissible. Can not be on a timer. Workspace is not interactive when present. The user must deal with the toast before they can interact with the page.

Try it out

Code samples

<div class="dqpl-toast dqpl-toast-success">
  <div class="dqpl-toast-message">
    <div class="fa fa-info-circle" aria-hidden="true"></div><span>I propose a toast!</span>
  </div>
  <button class="dqpl-toast-dismiss fa fa-close" type="button" aria-label="Dismiss notification"></button>
</div>
<div class="dqpl-toast dqpl-toast-warning">
  <div class="dqpl-toast-message">
    <div class="fa fa-warning" aria-hidden="true"></div><span>THIS TOAST IS STALE!</span>
  </div>
  <button class="dqpl-toast-dismiss fa fa-close" type="button" aria-label="Dismiss notification"></button>
</div>
<div class="dqpl-toast dqpl-toast-error">
  <div class="dqpl-toast-message">
    <div class="fa fa-minus-circle" aria-hidden="true"></div><span>The toast is burnt. Please<a href="/toasty">make some more toast</a></span>
  </div>
  <button class="dqpl-toast-dismiss fa fa-close" type="button" aria-label="Dismiss notification"></button>
</div>
<div class="dqpl-scrim-light"></div>

For more information on implementation read thewiki.