Docs

Alerts

Alerts convey contextual messages such as information, warnings, or errors.

Base

Standard alerts are part of the content area. These alerts are for notifying users that a particular component or area of the screen needs attention

Hello! I'm a default alert.
Hello! I'm a small default alert. 
<div class="joy-alert">
  <div class="joy-alert__content">
    Hello! I'm a default alert.
  </div>
</div>
<div class="joy-alert joy-alert--small">
  <div class="joy-alert__content">
    Hello! I'm a small default alert.
  </div>
</div>

Headings

Alerts headings should be used to summarize longer alert messages when necessary. They should just be placed inside a <p> tag instead of an <h1-6> tag.

Alert Headings

Alerts headings should be used to summarize longer alert messages when necessary. They should just be placed inside a <p> tag instead of an <h1-6> tag. 
<div class="joy-alert">
  <div class="joy-alert__content">
    <p class="joy-alert__heading">
      Alert Headings
    </p>
    Alerts headings should be used to summarize longer alert messages when necessary. They should just be placed inside a `<p>` tag instead of an `<h1-6>` tag.
  </div>
</div>

Actions

A close button (X, DISMISS, etc) serves as a method for users to acknowledge the alert. It also allows users to declutter the view. Omit the close button if the alert should be persistent.

Apply the class .joy-alert--is-hidden to the .joy-alert element to hide an alert.

I'm an alert with an action. In this case, the action is an SVG icon.
The action can also be text.
UNDO
The action text can be anything you like, but try to keep it short and contextual to the action the user needs to perform.
Dismiss 
<div class="joy-alert">
  <div class="joy-alert__content">
    I'm an alert with an action. In this case, the action is an SVG icon.
  </div>
  <div class="joy-alert__action" data-dismiss="alert-demo">
    <svg class="svg-icon svg-icon--close" xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 100 100">
      <path class="svg-icon__path" d="M98.17 89.33L58.84 50l39.33-39.33c2.44-2.44 2.44-6.4 0-8.84-2.44-2.44-6.4-2.44-8.84 0L50 41.16 10.67 1.83C8.23-.6 4.27-.6 1.83 1.83c-2.44 2.44-2.44 6.4 0 8.84L41.16 50 1.83 89.33c-2.44 2.44-2.44 6.4 0 8.84 2.44 2.44 6.4 2.44 8.84 0L50 58.84l39.33 39.33c2.44 2.44 6.4 2.44 8.84 0 2.44-2.44 2.44-6.4 0-8.84z"/>
    </svg>
  </div>
</div>
<div class="joy-alert">
  <div class="joy-alert__content">
    The action can also be text.
  </div>
  <div class="joy-alert__action" data-dismiss="alert-demo">
    UNDO
  </div>
</div>
<div class="joy-alert">
  <div class="joy-alert__content">
    The action text can be anything you like, but try to keep it short and contextual to the action the user needs to perform.
  </div>
  <div class="joy-alert__action" data-dismiss="alert-demo">
    Dismiss
  </div>
</div>

Types

There are 4 types of alerts, each of which denotes a different level of severity:

  • Danger: a problem needs to be fixed
  • Warning: an action might have a harmful outcome
  • Default: a situation needs attention, at some point
  • Success: a significant achievement occurred

Alerts have their own color palette of red, yellow, green, and blue. They are not styled with base colors to avoid competition with call-to-action buttons.

Danger Alert

There is a problem that need to be fixed immediately.

Warning Alert

Watch out, you may want to think twice about doing this.

Default Alert

Hey, just so you know, here's some information that may be helpful.

Success Alert

Great job. You did a very good thing. 

<div class="joy-alert joy-alert--danger">
  <div class="joy-alert__content">
    <h1 class="joy-alert__heading">
      Danger Alert
    </h1>
    There is a problem that need to be fixed immediately.
  </div>
  <div class="joy-alert__action" data-dismiss="alert-demo">
    <svg class="svg-icon svg-icon--close" xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 100 100">
      <path class="svg-icon__path" d="M98.17 89.33L58.84 50l39.33-39.33c2.44-2.44 2.44-6.4 0-8.84-2.44-2.44-6.4-2.44-8.84 0L50 41.16 10.67 1.83C8.23-.6 4.27-.6 1.83 1.83c-2.44 2.44-2.44 6.4 0 8.84L41.16 50 1.83 89.33c-2.44 2.44-2.44 6.4 0 8.84 2.44 2.44 6.4 2.44 8.84 0L50 58.84l39.33 39.33c2.44 2.44 6.4 2.44 8.84 0 2.44-2.44 2.44-6.4 0-8.84z"/>
    </svg>
  </div>
</div>
<div class="joy-alert joy-alert--warning">
  <div class="joy-alert__content">
    <h1 class="joy-alert__heading">
      Warning Alert
    </h1>
    Watch out, you may want to think twice about doing this.
  </div>
  <div class="joy-alert__action" data-dismiss="alert-demo">
    <svg class="svg-icon svg-icon--close" xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 100 100">
      <path class="svg-icon__path" d="M98.17 89.33L58.84 50l39.33-39.33c2.44-2.44 2.44-6.4 0-8.84-2.44-2.44-6.4-2.44-8.84 0L50 41.16 10.67 1.83C8.23-.6 4.27-.6 1.83 1.83c-2.44 2.44-2.44 6.4 0 8.84L41.16 50 1.83 89.33c-2.44 2.44-2.44 6.4 0 8.84 2.44 2.44 6.4 2.44 8.84 0L50 58.84l39.33 39.33c2.44 2.44 6.4 2.44 8.84 0 2.44-2.44 2.44-6.4 0-8.84z"/>
    </svg>
  </div>
</div>
<div class="joy-alert">
  <div class="joy-alert__content">
    <h1 class="joy-alert__heading">
      Default Alert
    </h1>
    Hey, just so you know, here's some information that may be helpful.
  </div>
  <div class="joy-alert__action" data-dismiss="alert-demo">
    <svg class="svg-icon svg-icon--close" xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 100 100">
      <path class="svg-icon__path" d="M98.17 89.33L58.84 50l39.33-39.33c2.44-2.44 2.44-6.4 0-8.84-2.44-2.44-6.4-2.44-8.84 0L50 41.16 10.67 1.83C8.23-.6 4.27-.6 1.83 1.83c-2.44 2.44-2.44 6.4 0 8.84L41.16 50 1.83 89.33c-2.44 2.44-2.44 6.4 0 8.84 2.44 2.44 6.4 2.44 8.84 0L50 58.84l39.33 39.33c2.44 2.44 6.4 2.44 8.84 0 2.44-2.44 2.44-6.4 0-8.84z"/>
    </svg>
  </div>
</div>
<div class="joy-alert joy-alert--success">
  <div class="joy-alert__content">
    <h1 class="joy-alert__heading">
      Success Alert
    </h1>
    Great job. You did a very good thing.
  </div>
  <div class="joy-alert__action" data-dismiss="alert-demo">
    <svg class="svg-icon svg-icon--close" xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 100 100">
      <path class="svg-icon__path" d="M98.17 89.33L58.84 50l39.33-39.33c2.44-2.44 2.44-6.4 0-8.84-2.44-2.44-6.4-2.44-8.84 0L50 41.16 10.67 1.83C8.23-.6 4.27-.6 1.83 1.83c-2.44 2.44-2.44 6.4 0 8.84L41.16 50 1.83 89.33c-2.44 2.44-2.44 6.4 0 8.84 2.44 2.44 6.4 2.44 8.84 0L50 58.84l39.33 39.33c2.44 2.44 6.4 2.44 8.84 0 2.44-2.44 2.44-6.4 0-8.84z"/>
    </svg>
  </div>
</div>

App-Level

An app-level alert appears at the top of the screen, above the application navbar. This alert is reserved for a single, system-level message.

App-level alerts have three severity levels:

Type Example
Danger This service will be unavailable all day tomorrow.
Default Your password will expire in 4 days.
Offline No internet connection detected. Data may not be saved.
  • Show only one app-level alert at a time.
  • Keep the message text to one line–don’t wrap the text.
  • Include up to two actions and keep button labels concise.
  • Do not include a menu within the alert.
  • When appropriate, include a close icon so that the app-level alert can be dismissed.
Update available. Please refresh your browser.
Application will be unavailable from 9am to 5pm PST.
No internet connection detected.
  Navbar 

<div class="joy-alert joy-alert--app-level">
  <div class="joy-alert__content">
    Update available. Please refresh your browser.
    <button class="joy-button joy-button--white joy-button--small joy-m-left--medium">
      REFRESH
    </button>
  </div>
  <div class="joy-alert__action" data-dismiss="alert-demo">
    <svg class="svg-icon svg-icon--close" xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 100 100">
      <path class="svg-icon__path" d="M98.17 89.33L58.84 50l39.33-39.33c2.44-2.44 2.44-6.4 0-8.84-2.44-2.44-6.4-2.44-8.84 0L50 41.16 10.67 1.83C8.23-.6 4.27-.6 1.83 1.83c-2.44 2.44-2.44 6.4 0 8.84L41.16 50 1.83 89.33c-2.44 2.44-2.44 6.4 0 8.84 2.44 2.44 6.4 2.44 8.84 0L50 58.84l39.33 39.33c2.44 2.44 6.4 2.44 8.84 0 2.44-2.44 2.44-6.4 0-8.84z"/>
    </svg>
  </div>
</div>
<div class="joy-alert joy-alert--app-level joy-alert--danger">
  <div class="joy-alert__content">
    Application will be unavailable from 9am to 5pm PST.
  </div>
  <div class="joy-alert__action" data-dismiss="alert-demo">
    <svg class="svg-icon svg-icon--close" xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 100 100">
      <path class="svg-icon__path" d="M98.17 89.33L58.84 50l39.33-39.33c2.44-2.44 2.44-6.4 0-8.84-2.44-2.44-6.4-2.44-8.84 0L50 41.16 10.67 1.83C8.23-.6 4.27-.6 1.83 1.83c-2.44 2.44-2.44 6.4 0 8.84L41.16 50 1.83 89.33c-2.44 2.44-2.44 6.4 0 8.84 2.44 2.44 6.4 2.44 8.84 0L50 58.84l39.33 39.33c2.44 2.44 6.4 2.44 8.84 0 2.44-2.44 2.44-6.4 0-8.84z"/>
    </svg>
  </div>
</div>
<div class="joy-alert joy-alert--app-level joy-alert--offline">
  <div class="joy-alert__content">
    No internet connection detected.
  </div>
  <div class="joy-alert__action" data-dismiss="alert-demo">
    <svg class="svg-icon svg-icon--close" xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 100 100">
      <path class="svg-icon__path" d="M98.17 89.33L58.84 50l39.33-39.33c2.44-2.44 2.44-6.4 0-8.84-2.44-2.44-6.4-2.44-8.84 0L50 41.16 10.67 1.83C8.23-.6 4.27-.6 1.83 1.83c-2.44 2.44-2.44 6.4 0 8.84L41.16 50 1.83 89.33c-2.44 2.44-2.44 6.4 0 8.84 2.44 2.44 6.4 2.44 8.84 0L50 58.84l39.33 39.33c2.44 2.44 6.4 2.44 8.84 0 2.44-2.44 2.44-6.4 0-8.84z"/>
    </svg>
  </div>
</div>
<div class="joy-navbar">
  <div class="joy-navbar__primary">
    <a href="#" class="joy-brand">
      <svg class="joy-brand__svg" viewBox="0 0 79 39" xmlns="http://www.w3.org/2000/svg">
        <path class="joy-brand__svg--path" d="M63 2.1h.7l.6 1.6.6-1.6h.7v2.3H65V2.6l-.6 1.8H64l-.6-1.8v1.8H63V2.1zm-2.4 0h2v.4h-.7v1.9h-.5V2.5h-.7v-.4h-.1zM17.5.7h31l-4.7 7.5h-31L17.5.7zm51.8 37.8L64.6 31H50.9l4.7-7.5h4.3L54.7 15 40 38.5H.8l9.4-15.1H3.3L8 15.9h30.3l-4.7 7.5H19.2l-4.7 7.5h21.4L54.8.7l23.6 37.7h-9.1v.1z"  fill-rule="evenodd"/>
      </svg>
      <span class="joy-brand__separator">
        &nbsp;
      </span>
      <span class="joy-brand__text">
        Navbar
      </span>
    </a>
  </div>
  <ul class="joy-navbar__group">
    <li class="joy-navbar__item">
      <a href="#" class="joy-navbar__link ">Link</a>
    </li>
    <li class="joy-navbar__item">
      <a href="#" class="joy-navbar__link joy-active">Active Link</a>
    </li>
    <li class="joy-navbar__item">
      <a href="#" class="joy-navbar__link">Link</a>
    </li>
  </ul>
</div>

Design Guidelines

Using Standard Alerts

Standard alerts are part of the content area. These alerts are for notifying users that a particular component or area of the screen needs attention. Standard alerts have four levels, denoted by color. From most to least severe, they are:

  • Danger: a problem needs to be fixed
  • Warning: an action might have a harmful outcome
  • Default: a situation needs attention, at some point
  • Success: a significant achievement occurred

Other choices for displaying messages are input field validations and modals . However, these components require users to take action before proceeding.

Placement

Alert positioning should be contextual to the component or area to which it applies. For example, if the alert applies to the entire content area, place it at the top and span the width of that area.

Closing Alerts

A close button (X, DISMISS, etc) serves as a method for users to acknowledge the alert. It also allows users to declutter the view. Omit the close button if the alert should be persistent.

Message Text

Keep the message text short and concise. If combining multiple messages in a single alert, make sure that the messages are of the same type. Avoid mixing danger and warning messages.

Color

Alerts have their own color palette of red, yellow, green, and blue. They are not styled with base colors to avoid competition with call-to-action buttons.

Stacking Alerts

Alerts can be stacked if you need to show multiple alerts at once. When showing multiple alerts, stack from most severe to least severe:

  1. Danger
  2. Warning
  3. Info
  4. Success

Stack up to three alerts. For more than three, consider an alternate pattern, such as displaying the information on another page.