Notification

Usage Style Code Playground
Notifications communicate a message with a severity attached to it. They grab the user's attention to provide critical information needed in context.

General Guidelines

Notifications serve as a feedback and confirmation mechanism to inform the user that an action has taken place or has failed. Notifications therefore are messages about either a positive or negative state.

Notifications are referred to as either toasts, breadboxes, or baguettes (banners) based on their shape and usage. Toast messages are square and pop-up to convey the need for an action. Breadboxes deliver a simple message and do not have a way to close or cancel out of them, but Baguettes should always provide a way to close or cancel. Also, animations on Baguettes should be timed appropriately to give the average user adequate time to read and process the notification message.

Placement

For layout purposes, notifications should appear at the top of a page or at the top of the section they are applicable to or inline with the content, such as a within a form.

Voice and Tone

Refrain from using system generated messages that are not intuitive to the average (non-technical) user.

Messages should be:

  • Clear, concise, and intuitive
  • Provide guidance as to what the user should do next
  • A positive (green) state communicates that there is no further action needed
  • A negative (red) state should explain what the user should do in order to proceed
  • A caution (orange) state is used for less urgent notifications
  • A informational (blue) state is used to provide additional information that may be helpful to the user and may require an action,
  • A bulletin (yellow) state is used to provide additional information that may be helpful to the user but does not require an action.

Grammar and Mechanics

  • Notification messages should be sentence case.
  • Notifications should consist of short sentences that convey a message clearly and concisely.

Usage

Configurations When
Use a notification When you need to communicate the result of an action.
Use a notification When you need to confirm an action was successful.
Use a notification When you need to explain that an action has failed to take place.
Use a Bread Box style When you need to provide users with an inline notification such as form validation or errors
Use a Baguette (Banner) style When you need to provide users with the flexibility to close the notification if they need to.

Do's and Don'ts

Do use sentence case
Do use baguettes for notifications that require close or cancel functionality
Do give users time to read and digest the information in the notification
Don’t use short animations
Notifications communicate a message with a severity attached to it. They grab the user's attention to provide critical information needed in context.

Coming soon...

Please enjoy a cat while you wait

Notifications communicate a message with a severity attached to it. They grab the user's attention to provide critical information needed in context.

Examples

For details on when to use this component, see the Usage tab.

Variant

The variants for this component are as follows:

Toast

We are building toasts and will describe them when they are done.

Breadbox

A breadbox notification is an inline notification. This type of notification is usually used for form validation and errors.

<div class="iris-notification iris-notification--breadbox iris-notification--negative" role="alert">
    <div class="iris-notification__context">
      <span class="font-icon-error" role="img" aria-label="Error!"></span>
    </div>
    <div class="iris-notification__message">Something went wrong</div>
</div>

Baguette (Banner)

A baguette notification appears across the top of the page and is dismissible with either close or cancel functionality.

<div class="iris-notification iris-notification--baguette iris-notification--negative" role="alert">
    <div class="iris-notification__inner">
        <div class="iris-notification__context">
            <span class="font-icon-error" role="img" aria-label="Error!"></span>
        </div>
        <p class="iris-notification__message">Something went wrong</p>
        <button class="iris-button iris-button--ghost iris-notification__action-button" aria-label="Close Notification">
            <span class="iris-button__icon font-icon-cancel-x"></span>
        </button>
    </div>
</div>

States

The notification component requires color coded states to be used in association with it. The five states this component can be in are as follows:

Negative

<div class="iris-notification iris-notification--breadbox iris-notification--negative" role="alert">
    <div class="iris-notification__context">
      <span class="font-icon-error" role="img" aria-label="Error!"></span>
    </div>
    <div class="iris-notification__message">Breadbox</div>
</div>
<div class="iris-notification iris-notification--baguette iris-notification--negative" role="alert">
    <div class="iris-notification__inner">
        <div class="iris-notification__context">
            <span class="font-icon-error" role="img" aria-label="Error!"></span>
        </div>
        <p class="iris-notification__message">Baguette</p>
        <button class="iris-button iris-button--ghost iris-notification__action-button" aria-label="Close Notification">
            <span class="iris-button__icon font-icon-cancel-x"></span>
        </button>
    </div>
</div>

Positive

<div class="iris-notification iris-notification--breadbox iris-notification--positive" role="alert">
    <div class="iris-notification__context">
      <span class="font-icon-circle-check-filled" role="img" aria-label="Success!"></span>
    </div>
    <div class="iris-notification__message">Breadbox</div>
</div>
<div class="iris-notification iris-notification--baguette iris-notification--positive" role="alert">
    <div class="iris-notification__inner">
        <div class="iris-notification__context">
            <span class="font-icon-circle-check-filled" role="img" aria-label="Success!"></span>
        </div>
        <p class="iris-notification__message">Baguette</p>
        <button class="iris-button iris-button--ghost iris-notification__action-button" aria-label="Close Notification">
            <span class="iris-button__icon font-icon-cancel-x"></span>
        </button>
    </div>
</div>

Caution

<div class="iris-notification iris-notification--breadbox iris-notification--caution" role="alert">
    <div class="iris-notification__context">
      <span class="font-icon-warning" role="img" aria-label="Warning!"></span>
    </div>
    <div class="iris-notification__message">Breadbox</div>
</div>
<div class="iris-notification iris-notification--baguette iris-notification--caution" role="alert">
    <div class="iris-notification__inner">
        <div class="iris-notification__context">
            <span class="font-icon-warning" role="img" aria-label="Warning!"></span>
        </div>
        <p class="iris-notification__message">Baguette</p>
        <button class="iris-button iris-button--ghost iris-notification__action-button" aria-label="Close Notification">
            <span class="iris-button__icon font-icon-cancel-x"></span>
        </button>
    </div>
</div>

Info

<div class="iris-notification iris-notification--breadbox iris-notification--info" role="alert">
    <div class="iris-notification__context">
      <span class="font-icon-circle-info-line" role="img" aria-label="Info"></span>
    </div>
    <div class="iris-notification__message">Breadbox</div>
</div>
<div class="iris-notification iris-notification--baguette iris-notification--info" role="alert">
    <div class="iris-notification__inner">
        <div class="iris-notification__context">
            <span class="font-icon-circle-info-line" role="img" aria-label="Info"></span>
        </div>
        <p class="iris-notification__message">Baguette</p>
        <button class="iris-button iris-button--ghost iris-notification__action-button" aria-label="Close Notification">
            <span class="iris-button__icon font-icon-cancel-x"></span>
        </button>
    </div>
</div>

Bulletin

<div class="iris-notification iris-notification--breadbox iris-notification--bulletin" role="alert">
    <div class="iris-notification__context">
      <span class="font-icon-warning" role="img" aria-label="Warning!"></span>
    </div>
    <div class="iris-notification__message">Breadbox</div>
</div>
<div class="iris-notification iris-notification--baguette iris-notification--bulletin" role="alert">
    <div class="iris-notification__inner">
        <div class="iris-notification__context">
            <span class="font-icon-warning" role="img" aria-label="Warning!"></span>
        </div>
        <p class="iris-notification__message">Baguette</p>
        <button class="iris-button iris-button--ghost iris-notification__action-button" aria-label="Close Notification">
            <span class="iris-button__icon font-icon-cancel-x"></span>
        </button>
    </div>
</div>

Breadbox Notifications with Actions

Iris breadbox notifications also support an action button that is aligned to the right side of the container.

<div class="iris-notification iris-notification--breadbox iris-notification--info" role="alert">
    <div class="iris-notification__context">
        <span class="font-icon-circle-info-line" role="img" aria-label="Info"></span>
    </div>

    <div class="iris-notification__message">Please add your address before continuing with updating your phone number.</div>

    <div class="iris-notification__action">
        <button class="iris-button iris-button--action">
            <span class="iris-button__text">Add Address</span>
        </button>
    </div>
</div>
<div class="iris-notification iris-notification--breadbox iris-notification--caution" role="alert">
    <div class="iris-notification iris-notification--breadbox iris-notification--caution" role="alert">
        <div class="iris-notification__context">
            <span class="font-icon-warning" role="img" aria-label="Warning"></span>
        </div>

        <div class="iris-notification__message">MESSAGE</div>

        <div class="iris-notification__action">
            <button class="iris-button iris-button--action">
                <span class="iris-button__text">Retry Submission</span>
            </button>
        </div>
    </div>
</div>

Accessibility

As always, we want all of the components in the application to be accessible. Please keep the following notes in mind while using this component:

  • When using a negative or caution notification add a role="alert"
  • When using a success, info, or bulletin notificaiton add a aria-live="polite"
  • Always put role="img" and an aria-label on icons

Variables

The variables used in this component are as follows:

// Background variables
$notification-background-error: $thunderbird;
$notification-background-success: $forest-green;
$notification-background-warning: $orange-roughy;
$notification-background-informational: $steel-blue;
$notification-background-bulletin: $buttermilk;

// Border variables
$notification-border-default: 1px solid;
$notification-border-error: $thunderbird;
$notification-border-success: $forest-green;
$notification-border-warning: $orange-roughy;
$notification-border-informational: $steel-blue;
$notificaiton-border-bulletin: $buttermilk;

// Text variables
$notification-font-size-breadbox: 1.3rem;
$notification-line-height-breadbox: 1.5rem;
$notification-icon-size-breadbox: 1.5rem;
$notification-text-breadbox: $mine-shaft;
$notification-icon-breadbox: $white;
$notification-font-size-baguette: 1.5rem;
$notification-line-height-baguette: 1.8rem;
$notification-icon-size-baguette: 3.8rem;
$notification-text-baguette: $white;
$notification-icon-baguette: $white;
$notification-text-bulletin: $mine-shaft;
$notification-icon-bulletin: $mine-shaft;

Themeability

Nothing is themeable in this component.

Variant: *Breadbox** | State: Positive | Decorator: None*

Positive 

<div class="iris-notification iris-notification--breadbox iris-notification--positive" aria-live="polite">
    <div class="iris-notification__context">
        <span class="font-icon-circle-check-filled" role="img" aria-label="Success!"></span>
    </div>
    <p class="iris-notification__message">Positive</p>
</div>

Variant: *Breadbox** | State: Negative | Decorator: None*

<div class="iris-notification iris-notification--breadbox iris-notification--negative" role="alert">
    <div class="iris-notification__context">
        <span class="font-icon-error" role="img" aria-label="Error!"></span>
    </div>
    <p class="iris-notification__message">Negative</p>
</div>

Variant: *Breadbox** | State: Caution | Decorator: None*

<div class="iris-notification iris-notification--breadbox iris-notification--caution" role="alert">
    <div class="iris-notification__context">
        <span class="font-icon-warning" role="img" aria-label="Caution!"></span>
    </div>
    <p class="iris-notification__message">Caution</p>
</div>

Variant: *Breadbox** | State: Info | Decorator: None*

Info 

<div class="iris-notification iris-notification--breadbox iris-notification--info" aria-live="polite">
    <div class="iris-notification__context">
        <span class="font-icon-circle-info-line" role="img" aria-label="Info"></span>
    </div>
    <p class="iris-notification__message">Info</p>
</div>

Variant: *Breadbox** | State: Bulletin | Decorator: None*

Bulletin 

<div class="iris-notification iris-notification--breadbox iris-notification--bulletin" aria-live="polite">
    <div class="iris-notification__context">
        <span class="font-icon-warning" role="img" aria-label="Caution!"></span>
    </div>
    <p class="iris-notification__message">Bulletin</p>
</div>

Variant: *Baguette** | State: Positive | Decorator: None*

Positive 

<div class="iris-notification iris-notification--baguette iris-notification--positive" aria-live="polite">
    <div class="iris-notification__inner">
        <div class="iris-notification__context">
            <span class="font-icon-circle-check-filled" role="img" aria-label="Success!"></span>
        </div>
        <p class="iris-notification__message"> Positive </p>
        <button class="iris-button iris-button--ghost iris-notification__action-button" aria-label="Close Notification">
            <span class="iris-button__icon font-icon-cancel-x"></span>
        </button>
    </div>
</div>

Variant: *Baguette** | State: Positive | Decorator: *

Positive 

<div class="iris-notification iris-notification--baguette iris-notification--positive" aria-live="polite">
    <div class="iris-notification__inner">
        <div class="iris-notification__context">
            <span class="font-icon-circle-check-filled" role="img" aria-label="Success!"></span>
        </div>
        <p class="iris-notification__message"> Positive </p>
        <button class="iris-button iris-button--ghost iris-notification__action-button" aria-label="Close Notification">
            <span class="iris-button__icon font-icon-cancel-x"></span>
        </button>
    </div>
</div>

Variant: *Baguette** | State: Negative | Decorator: None*

<div class="iris-notification iris-notification--baguette iris-notification--negative" role="alert">
    <div class="iris-notification__inner">
        <div class="iris-notification__context">
            <span class="font-icon-error" role="img" aria-label="Error!"></span>
        </div>
        <p class="iris-notification__message"> Negative </p>
        <button class="iris-button iris-button--ghost iris-notification__action-button" aria-label="Close Notification">
            <span class="iris-button__icon font-icon-cancel-x"></span>
        </button>
    </div>
</div>

Variant: *Baguette** | State: Negative | Decorator: *

<div class="iris-notification iris-notification--baguette iris-notification--negative" role="alert">
    <div class="iris-notification__inner">
        <div class="iris-notification__context">
            <span class="font-icon-error" role="img" aria-label="Error!"></span>
        </div>
        <p class="iris-notification__message"> Negative </p>
        <button class="iris-button iris-button--ghost iris-notification__action-button" aria-label="Close Notification">
            <span class="iris-button__icon font-icon-cancel-x"></span>
        </button>
    </div>
</div>

Variant: *Baguette** | State: Caution | Decorator: None*

<div class="iris-notification iris-notification--baguette iris-notification--caution" role="alert">
    <div class="iris-notification__inner">
        <div class="iris-notification__context">
            <span class="font-icon-warning" role="img" aria-label="Caution!"></span>
        </div>
        <p class="iris-notification__message"> Caution </p>
        <button class="iris-button iris-button--ghost iris-notification__action-button" aria-label="Close Notification">
            <span class="iris-button__icon font-icon-cancel-x"></span>
        </button>
    </div>
</div>

Variant: *Baguette** | State: Caution | Decorator: *

<div class="iris-notification iris-notification--baguette iris-notification--caution" role="alert">
    <div class="iris-notification__inner">
        <div class="iris-notification__context">
            <span class="font-icon-warning" role="img" aria-label="Caution!"></span>
        </div>
        <p class="iris-notification__message"> Caution </p>
        <button class="iris-button iris-button--ghost iris-notification__action-button" aria-label="Close Notification">
            <span class="iris-button__icon font-icon-cancel-x"></span>
        </button>
    </div>
</div>

Variant: *Baguette** | State: Info | Decorator: None*

Info 

<div class="iris-notification iris-notification--baguette iris-notification--info" aria-live="polite">
    <div class="iris-notification__inner">
        <div class="iris-notification__context">
            <span class="font-icon-circle-info-line" role="img" aria-label="Info"></span>
        </div>
        <p class="iris-notification__message"> Info </p>
        <button class="iris-button iris-button--ghost iris-notification__action-button" aria-label="Close Notification">
            <span class="iris-button__icon font-icon-cancel-x"></span>
        </button>
    </div>
</div>

Variant: *Baguette** | State: Info | Decorator: *

Info 

<div class="iris-notification iris-notification--baguette iris-notification--info" aria-live="polite">
    <div class="iris-notification__inner">
        <div class="iris-notification__context">
            <span class="font-icon-circle-info-line" role="img" aria-label="Info"></span>
        </div>
        <p class="iris-notification__message"> Info </p>
        <button class="iris-button iris-button--ghost iris-notification__action-button" aria-label="Close Notification">
            <span class="iris-button__icon font-icon-cancel-x"></span>
        </button>
    </div>
</div>

Variant: *Baguette** | State: Bulletin | Decorator: None*

Bulletin 

<div class="iris-notification iris-notification--baguette iris-notification--bulletin" aria-live="polite">
    <div class="iris-notification__inner">
        <div class="iris-notification__context">
            <span class="font-icon-warning" role="img" aria-label="Caution!"></span>
        </div>
        <p class="iris-notification__message"> Bulletin </p>
        <button class="iris-button iris-button--ghost iris-notification__action-button" aria-label="Close Notification">
            <span class="iris-button__icon font-icon-cancel-x"></span>
        </button>
    </div>
</div>

Variant: *Baguette** | State: Bulletin | Decorator: *

Bulletin 

<div class="iris-notification iris-notification--baguette iris-notification--bulletin" aria-live="polite">
    <div class="iris-notification__inner">
        <div class="iris-notification__context">
            <span class="font-icon-warning" role="img" aria-label="Caution!"></span>
        </div>
        <p class="iris-notification__message"> Bulletin </p>
        <button class="iris-button iris-button--ghost iris-notification__action-button" aria-label="Close Notification">
            <span class="iris-button__icon font-icon-cancel-x"></span>
        </button>
    </div>
</div>