Toasts (fka Notifications)

We use toasts to convey information that's contextually relavant to what's happening in the app. While a toast might occasionally prompt an optional action from the user, its information is more asynchronous than what might appear in a modal, and it's never urgent enough to warrant a forced interruption.

Toast Types

Closable Toasts. These toasts will remain visible until the user clicks the x button to manually close them.

Closable, Vanishing Toasts. These toasts will have an x button that allows them to be manually closed by the user, and they will also close themselves when either:

An action occurs to make them irrelevant, or
A certain amount of time has passed. That amount of time will depend on the length of the message. The general rule of thumb is each character takes about 100ms to parse. So for a short notification with 20 to 30 words, 3 seconds will usually be adequate.

Permanent, Uncloseable Toasts. These toasts can't be dismissed by the user, and they won't disappear on their own. This type should be used extremely sparingly to and only to convey evergreen, broad-ranging messages. An example use case would be the Beta Editor banner.

Toast Layout

Toasts should appear on the bottom right corner of the screen, overlaying any content beneath them. Multiple toasts can be stacked on top of each other.

<header></header>
<main></main>
<div class="l-notificationwrap">
  <!-- NOTIFICATION GOES HERE -->
</div>

Toast Styles

Success

These types of toasts usually appear to indicate the successful completion of an action initiated by the user.

Success! You did a thing, and it worked out great.

<div class="l-notificationwrap">
  <div class="o-notification is-success has-space-between l-notification" style="width: 300px;">
    <div class="o-notification__leftcol">
      <div class="o-notification__icon">
        <i class="fa fa-check"></i>
      </div>
      <div class="o-notification__message">Success! You did a thing, and it worked out great.</div>
    </div>
    <div class="o-notification__rightcol">
      <button class="o-notification__icon o-notification__icon--close">
        <i class="fa fa-times"></i>
      </button>
    </div>
  </div>
</div>

Neutral

These types of toasts are usually meant to convey neutral-to-positive information that usually doesn't stem from or require action from the user. They're mostly informational, requiring only acknowledgement and no direct action.

Something happened that's not necessarily bad or good.

<div class="l-notificationwrap">
  <div class="o-notification is-neutral has-space-between l-notification" style="width: 300px;">
    <div class="o-notification__leftcol">
      <div class="o-notification__icon">
        <i class="fa fa-check"></i>
      </div>
      <div class="o-notification__message">Something happened that's not necessarily bad or good.</div>
    </div>
    <div class="o-notification__rightcol">
      <button class="o-notification__icon o-notification__icon--close">
        <i class="fa fa-times"></i>
      </button>
    </div>
  </div>
</div>

Warning

These toasts are meant to convey information that is critical to using the app, and they could prompt an action of the user.

Something happened that you should know about.

<div class="l-notificationwrap">
  <div class="o-notification is-warning has-space-between l-notification">
    <div class="o-notification__leftcol">
      <div class="o-notification__icon">
        <i class="fa fa-warning"></i>
      </div>
      <div class="o-notification__message">Something happened that you should know about.</div>
    </div>
    <div class="o-notification__rightcol">
      <button class="o-notification__icon o-notification__icon--close">
        <i class="fa fa-times"></i>
      </button>
    </div>
  </div>
</div>

Error

These types of messages mean something has gone wrong, and they often require action of the user, either implicitly or explicitly.

Something went wrong.

<div class="l-notificationwrap">
  <div class="o-notification is-error has-space-between l-notification">
    <div class="o-notification__leftcol">
      <div class="o-notification__icon">
        <i class="fa fa-warning"></i>
      </div>
      <div class="o-notification__message">Something went wrong.</div>
    </div>
    <div class="o-notification__rightcol">
      <button class="o-notification__icon o-notification__icon--close">
        <i class="fa fa-times"></i>
      </button>
    </div>
  </div>
</div>

Animation

Each individual o-notification should animate in with the animate.css classes animated and fadeInUp.

When dismissed, each individual o-notification should animate out with with the animate.css classes animated and fadeOutRight, either when the user closes them or a certain amount of time has passed. (That amount of time will depend on the length of the message. The general rule of thumb is each character takes about 100ms to parse.)

Icon Usage

Icons can be used with any toast style or type. They should appear directly to the left of the toast text.

Icons can help symbolize the core meaning of a toast's message and, if used correctly, make toasts easier to parse. They should be used as often as is appropriate, as long as their meaning is easily understood and doesn't detract from the core message. Toast icons should never be used solely for decoration, only to enhance to overall message of the toast.

Emoji can occasionally be used in toasts instead of an icon. They can be placed to the left of toast text, like an icon. They're most useful in injecting a sense of fun and whimsy that is appropriate in some cases—like when announcing a new feature, for example—but they should be used carefully. We should avoid using them in warning and error toasts especially, as they could dilute or detract from the core message we're trying to communicate.