Notifications

Notifications are like road signs—they’re timely, useful, and grab your attention.

We use notifications to draw a reader’s attention to an important message, although the primary message in the interface may be somewhere else. A notification should be timely and contextual, and give the impression that it’s not an always-present message. In general, notifications should:

  • Convey the main point in 1-2 brief sentences
  • Suggest a course of action (when appropriate, include a link)
  • Appear above the page content and below the navigation

FYI

Basic notification! Could include a link.

We use the FYI notification to share instructional information about the interface, the user’s account, or energy use. It uses the primary color so it feels important but not alarming, and should be dismissible.

{% toggleText('fyi') %}
<div
    class="notification-container has-icon"
    ng-controller="notificationExampleController"
    ng-class="{'dismissed': notificationIsDismissed}">
    <div class="notification">
        <img class="icon iconic" data-src="opattern-icons/svg/smart/circle-check.svg" />
        FYI notification! Could include a <a href="#">link</a>.
        <a ng-click="dismiss()" class="notification-close">
            <img class="icon iconic iconic-sm" data-src="opattern-icons/svg/smart/x.svg" />
        </a>
    </div>
</div>

Alert

Alert notification! Should include a link.

We use the alert notification to let the user know something went wrong or convey urgent information. This notification uses the alert color to grab the user’s attention. Whenever possible, make it actionable—tell them how to address the problem. Depending on the context, this notification can be dismissed.

{% toggleText('alert') %}
<div
    class="notification-container has-icon alert"
    ng-controller="notificationExampleController"
    ng-class="{'dismissed': notificationIsDismissed}">
    <div class="notification">
        <img class="icon iconic" data-src="opattern-icons/svg/smart/circle-x.svg" />
        Alert notification! Should include a <a href="#">link</a>.
        <a ng-click="dismiss()" class="notification-close">
            <img class="icon iconic iconic-sm" data-src="opattern-icons/svg/smart/x.svg" />
        </a>
    </div>
</div>

Confirmation

Confirmation notification! Could include a link.

We use the confirmation notification to offer immediate feedback that something good happened (for example, a form was submitted successfully or a selection was saved). This notification is also useful when rewarding the user for energy-efficient actions or behavior. We also call this the “success” message and use the success color.

{% toggleText('confirmation') %}
<div
    class="notification-container has-icon success"
    ng-controller="notificationExampleController"
    ng-class="{'dismissed': notificationIsDismissed}">
    <div class="notification">
        <img class="icon iconic" data-src="opattern-icons/svg/smart/circle-check.svg" />
        Confirmation notification! Could include a <a href="#">link</a>.
        <a ng-click="dismiss()" class="notification-close">
            <img class="icon iconic iconic-sm" data-src="opattern-icons/svg/smart/x.svg" />
        </a>
    </div>
</div>

Request

Request notification! Should always include a link.

The request notification asks the user for information or reminds them to complete a task. It should always have a link to address the request, and should be dismissible.

{% toggleText('request') %}
<div
    class="notification-container has-icon question"
    ng-controller="notificationExampleController"
    ng-class="{'dismissed': notificationIsDismissed}">
    <div class="notification">
        <img class="icon iconic" data-src="opattern-icons/svg/smart/circle-x.svg" />
        Request notification! Should always include a <a href="#">link</a>.
        <a ng-click="dismiss()" class="notification-close">
            <img class="icon iconic iconic-sm" data-src="opattern-icons/svg/smart/x.svg" />
        </a>
    </div>
</div>