Notifications

Notifications alert the user to a significant occurrence or change in the system. Notifications can be in reference to a specific UI element or to the system as a whole.

Global

Global notifications reference a global change in the system. Global notificaions can display above the header or immediately below the header, depending on the product or site's design.

Figure: Notification above header Notificaton above header

Figure: Notification below header Notificaton above header

Information! This is a heading.

This is a global notification about something that has occured in the system. This message applies to the entire system.

Warning! This is a heading.

This is a global notification about something that has occured in the system. This message applies to the entire system.

Success! This is a heading.

This is a global notification about something that has occured in the system. This message applies to the entire system.

Error! This is a heading.

This is a global notification about something that has occured in the system. This message applies to the entire system.

Copied to clipboard

<div class="luci-notification" role="alert">
    <span class="luci-notification__inner">
        <svg class="luci-icon luci-icon--size-sm luci-notification__icon" aria-hidden="true">
            <use xlink:href="/icons/luci.svg#info"> </use>
        </svg>
        <div class="luci-notification__text">
            <div class="luci-notification__heading"> Information! This is a heading. </div>
            </h3>
            <div class="luci-notification__description"> This is a global notification about something that has occured in the system. This message applies to the entire system. </div>
        </div>
    </span>
</div>
<div class="luci-notification luci-notification--warning" role="alert">
    <span class="luci-notification__inner">
        <svg class="luci-icon luci-icon--size-sm luci-notification__icon" aria-hidden="true">
            <use xlink:href="/icons/luci.svg#warning"> </use>
        </svg>
        <div class="luci-notification__text">
            <div class="luci-notification__heading"> Warning! This is a heading. </div>
            </h3>
            <div class="luci-notification__description"> This is a global notification about something that has occured in the system. This message applies to the entire system. </div>
        </div>
    </span>
</div>
<div class="luci-notification luci-notification--success" role="alert">
    <span class="luci-notification__inner">
        <svg class="luci-icon luci-icon--size-sm luci-notification__icon" aria-hidden="true">
            <use xlink:href="/icons/luci.svg#success"> </use>
        </svg>
        <div class="luci-notification__text">
            <div class="luci-notification__heading"> Success! This is a heading. </div>
            </h3>
            <div class="luci-notification__description"> This is a global notification about something that has occured in the system. This message applies to the entire system. </div>
        </div>
    </span>
</div>
<div class="luci-notification luci-notification--error" role="alert">
    <span class="luci-notification__inner">
        <svg class="luci-icon luci-icon--size-sm luci-notification__icon" aria-hidden="true">
            <use xlink:href="/icons/luci.svg#error"> </use>
        </svg>
        <div class="luci-notification__text">
            <div class="luci-notification__heading"> Error! This is a heading. </div>
            </h3>
            <div class="luci-notification__description"> This is a global notification about something that has occured in the system. This message applies to the entire system. </div>
        </div>
    </span>
</div>

Global with Close Button

Copied to clipboard

<div class="luci-notification" role="alertdialog" aria-describedby="notification1Desc">
    <span class="luci-notification__inner">
        <svg class="luci-icon luci-icon--size-sm luci-notification__icon" aria-hidden="true">
            <use xlink:href="/icons/luci.svg#info"> </use>
        </svg>
        <div class="luci-notification__text" id="notification1Desc">
            <div class="luci-notification__heading"> Information! This is a heading. </div>
            </h3>
            <div class="luci-notification__description"> This is a global notification about something that has occured in the system. This message applies to the entire system. </div>
        </div>
        <button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-notification__button--close luci-button--with-icons">
            <span class="luci-button__inner">
                <svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
                    <use xlink:href="/icons/luci.svg#close"> </use>
                </svg>
            </span>
        </button>
    </span>
</div>
<div class="luci-notification luci-notification--warning" role="alertdialog" aria-describedby="notification1Desc">
    <span class="luci-notification__inner">
        <svg class="luci-icon luci-icon--size-sm luci-notification__icon" aria-hidden="true">
            <use xlink:href="/icons/luci.svg#warning"> </use>
        </svg>
        <div class="luci-notification__text" id="notification1Desc">
            <div class="luci-notification__heading"> Warning! This is a heading. </div>
            </h3>
            <div class="luci-notification__description"> This is a global notification about something that has occured in the system. This message applies to the entire system. </div>
        </div>
        <button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-notification__button--close luci-button--with-icons">
            <span class="luci-button__inner">
                <svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
                    <use xlink:href="/icons/luci.svg#close"> </use>
                </svg>
            </span>
        </button>
    </span>
</div>
<div class="luci-notification luci-notification--success" role="alertdialog" aria-describedby="notification2Desc">
    <span class="luci-notification__inner">
        <svg class="luci-icon luci-icon--size-sm luci-notification__icon" aria-hidden="true">
            <use xlink:href="/icons/luci.svg#success"> </use>
        </svg>
        <div class="luci-notification__text" id="notification2Desc">
            <div class="luci-notification__heading"> Success! This is a heading. </div>
            </h3>
            <div class="luci-notification__description"> This is a global notification about something that has occured in the system. This message applies to the entire system. </div>
        </div>
        <button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-notification__button--close luci-button--with-icons">
            <span class="luci-button__inner">
                <svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
                    <use xlink:href="/icons/luci.svg#close"> </use>
                </svg>
            </span>
        </button>
    </span>
</div>
<div class="luci-notification luci-notification--error" role="alertdialog" aria-describedby="notification3Desc">
    <span class="luci-notification__inner">
        <svg class="luci-icon luci-icon--size-sm luci-notification__icon" aria-hidden="true">
            <use xlink:href="/icons/luci.svg#error"> </use>
        </svg>
        <div class="luci-notification__text" id="notification3Desc">
            <div class="luci-notification__heading"> Error! This is a heading. </div>
            </h3>
            <div class="luci-notification__description"> This is a global notification about something that has occured in the system. This message applies to the entire system. </div>
        </div>
        <button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-notification__button--close luci-button--with-icons">
            <span class="luci-button__inner">
                <svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
                    <use xlink:href="/icons/luci.svg#close"> </use>
                </svg>
            </span>
        </button>
    </span>
</div>

Page-level

Page-level notifications correspond to page level changes in the system. Page-level notifications display contextually on the page where the system change occurred.

Figure: Notification page-level

Information! This is a heading.

This is a global notification about something that has occured in the system. This message applies to the entire system.

Warning! This is a heading.

This is a global notification about something that has occured in the system. This message applies to the entire system.

Success! This is a heading.

This is a global notification about something that has occured in the system. This message applies to the entire system.

Error! This is a heading.

This is a global notification about something that has occured in the system. This message applies to the entire system.

Copied to clipboard

<div class="luci-notification luci-notification--inline" role="alert">
    <span class="luci-notification__inner">
        <svg class="luci-icon luci-icon--size-sm luci-notification__icon" aria-hidden="true">
            <use xlink:href="/icons/luci.svg#info"> </use>
        </svg>
        <div class="luci-notification__text">
            <div class="luci-notification__heading"> Information! This is a heading. </div>
            </h3>
            <div class="luci-notification__description"> This is a global notification about something that has occured in the system. This message applies to the entire system. </div>
        </div>
    </span>
</div>
<div class="luci-notification luci-notification--warning luci-notification--inline" role="alert">
    <span class="luci-notification__inner">
        <svg class="luci-icon luci-icon--size-sm luci-notification__icon" aria-hidden="true">
            <use xlink:href="/icons/luci.svg#warning"> </use>
        </svg>
        <div class="luci-notification__text">
            <div class="luci-notification__heading"> Warning! This is a heading. </div>
            </h3>
            <div class="luci-notification__description"> This is a global notification about something that has occured in the system. This message applies to the entire system. </div>
        </div>
    </span>
</div>
<div class="luci-notification luci-notification--success luci-notification--inline" role="alert">
    <span class="luci-notification__inner">
        <svg class="luci-icon luci-icon--size-sm luci-notification__icon" aria-hidden="true">
            <use xlink:href="/icons/luci.svg#success"> </use>
        </svg>
        <div class="luci-notification__text">
            <div class="luci-notification__heading"> Success! This is a heading. </div>
            </h3>
            <div class="luci-notification__description"> This is a global notification about something that has occured in the system. This message applies to the entire system. </div>
        </div>
    </span>
</div>
<div class="luci-notification luci-notification--error luci-notification--inline" role="alert">
    <span class="luci-notification__inner">
        <svg class="luci-icon luci-icon--size-sm luci-notification__icon" aria-hidden="true">
            <use xlink:href="/icons/luci.svg#error"> </use>
        </svg>
        <div class="luci-notification__text">
            <div class="luci-notification__heading"> Error! This is a heading. </div>
            </h3>
            <div class="luci-notification__description"> This is a global notification about something that has occured in the system. This message applies to the entire system. </div>
        </div>
    </span>
</div>

Toast

Toast notifications are short, unobtrusive, auto-expiring notifications. Toast notifications confirm the system has completed a task. These notifications are time-sensitive, but do not require the user to take action. Toast notifications display in the top right corner of the screen by adding the modifier class .luci-notification--toast-position-absolute or .luci-notification--toast-position-fixed to the luci-notification--toast element. Once you change the position of the notification, its parent container will need a position: relative.

Figure: Toast notification position

Information! This is a heading.

This is a toast notification about something that has occured in this context. I auto-expire and disappear.

Success! This is a heading.

This is a toast notification about something that has occured in this context. I auto-expire and disappear.

Copied to clipboard

<div class="luci-notification luci-notification--toast" role="alert">
    <span class="luci-notification__inner">
        <svg class="luci-icon luci-icon--size-sm luci-notification__icon" aria-hidden="true">
            <use xlink:href="/icons/luci.svg#info"> </use>
        </svg>
        <div class="luci-notification__text">
            <div class="luci-notification__heading"> Information! This is a heading. </div>
            </h3>
            <div class="luci-notification__description"> This is a toast notification about something that has occured in this context. I auto-expire and disappear. </div>
        </div>
    </span>
</div>
<div class="luci-notification luci-notification--toast luci-notification--success" role="alert">
    <span class="luci-notification__inner">
        <svg class="luci-icon luci-icon--size-sm luci-notification__icon" aria-hidden="true">
            <use xlink:href="/icons/luci.svg#success"> </use>
        </svg>
        <div class="luci-notification__text">
            <div class="luci-notification__heading"> Success! This is a heading. </div>
            </h3>
            <div class="luci-notification__description"> This is a toast notification about something that has occured in this context. I auto-expire and disappear. </div>
        </div>
    </span>
</div>

Toast with Close Button

Copied to clipboard

<div class="luci-notification luci-notification--toast" role="alertdialog" aria-describedby="notification4Desc">
    <span class="luci-notification__inner">
        <svg class="luci-icon luci-icon--size-sm luci-notification__icon" aria-hidden="true">
            <use xlink:href="/icons/luci.svg#info"> </use>
        </svg>
        <div class="luci-notification__text" id="notification4Desc">
            <div class="luci-notification__heading"> Information! This is a heading. </div>
            </h3>
            <div class="luci-notification__description"> This is a toast notification about something that has occured in this context. I auto-expire and disappear. </div>
        </div>
        <button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-notification__button--close luci-button--with-icons">
            <span class="luci-button__inner">
                <svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
                    <use xlink:href="/icons/luci.svg#close"> </use>
                </svg>
            </span>
        </button>
    </span>
</div>
<div class="luci-notification luci-notification--toast luci-notification--success" role="alertdialog" aria-describedby="notification4Desc">
    <span class="luci-notification__inner">
        <svg class="luci-icon luci-icon--size-sm luci-notification__icon" aria-hidden="true">
            <use xlink:href="/icons/luci.svg#success"> </use>
        </svg>
        <div class="luci-notification__text" id="notification4Desc">
            <div class="luci-notification__heading"> Success! This is a heading. </div>
            </h3>
            <div class="luci-notification__description"> This is a toast notification about something that has occured in this context. I auto-expire and disappear. </div>
        </div>
        <button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-notification__button--close luci-button--with-icons">
            <span class="luci-button__inner">
                <svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
                    <use xlink:href="/icons/luci.svg#close"> </use>
                </svg>
            </span>
        </button>
    </span>
</div>

Accessibility

Add the alertdialog role to a notification that contains a close button.
The notification that has the alertdialog role must always be given an accessible name using arialabelledby or aria-label.
When the notification appears the focus must be moved to the close button.
Add the alert role to a notification that does not contain a close button.
A notification with the alert role does not need to receive focus.

Class Reference

Class	Applies to	Outcome
`.luci-notification--warning`	`.luci-notification`	Applies the feedback warning background color.
`.luci-notification--success`	`.luci-notification`	Applies the feedback success background color.
`.luci-notification--error`	`.luci-notification`	Applies the feedback error background color.
`.luci-notification--inline`	`.luci-notification`	Applies a `max-width` and margin left and right of `auto` to center the notification on the page.
`.luci-notification--toast`	`.luci-notification`	Applies a `max-width` and `box-shadow`.
`.luci-notification--toast-position-absolute`	`.luci-notification--toast`	Positions the notification to the top right of its parent container.
`.luci-notification--toast-position-fixed`	`.luci-notification--toast`	Positions the notification to the top right of the browser window.
`.luci-notification--is-hidden`	`.luci-notification`	Sets the `opacity` to `0` and the `visibility` to `hidden` when the notification is closed.