Notifications (Deprecated)

Notifications highlight that an event has occurred.

This component is deprecated and will be removed in v2.0.
Please use the enhanced Notifications component for all new development.

Variations

Default

Use when relaying non-critical information pertaining to a user's action.

Example

Default

Your report is being generated.

White Light Dark Black

<div role="alert" class="mds-notification mds-notification--with-close-button mds-container--white ">
    <div class="mds-notification__message">Your report is being generated.</div>
    <button class="mds-button mds-notification__close-button mds-button--small mds-button--icon-only" type="button" role="button">
        <svg class="mds-icon mds-button__icon mds-button__icon--right">
            <use xlink:href="/assets/icons/mds_icons.svg#remove--s">
                <title>Close</title>
            </use>
        </svg>
    </button>
</div>

Automatically dismisses after 5 seconds.
Lengthen the timeout interval for longer notification messages.

With Action

Use when the notification contains an “Undo” option, or a follow-up action via a button or link.

Example

Default

White Light Dark Black

<div role="alertdialog" class="mds-notification mds-notification--with-close-button mds-container--white ">
    <div class="mds-notification__message">1,134 items have been deleted.
        <button class="mds-button mds-button--small" type="button" role="button"> Undo </button>
    </div>
    <button class="mds-button mds-notification__close-button mds-button--small mds-button--icon-only" type="button" role="button">
        <svg class="mds-icon mds-button__icon mds-button__icon--right">
            <use xlink:href="/assets/icons/mds_icons.svg#remove--s">
                <title>Close</title>
            </use>
        </svg>
    </button>
</div>

Persists until a user clicks elsewhere on screen, after which the notification automatically dismisses after 5 seconds.
Dismiss after a user clicks the action, i.e., “Undo”.

Guidelines

Use When

Displaying a success, error, or warning message.
Notifying the user of a process happening in the background.
Relaying information to a user without interrupting their current task.

Don't Use When

Requiring a choice by the user, like “Save” or “Cancel”. Instead, use a Dialog.
Needing to show paragraphs of text. Instead, use a Modal.

Behaviors

Display at the top center edge of the browser. To display in other locations, coordinate with a System designer about options.

Appropriate placement of a notification.

Dismiss notifications at any time by clicking the close icon, remove--s.

Editorial

Use full sentences and punctuation.
Keep it brief. Maybe a sentence, no more than two. Should be able to be read in 5 seconds.
Use “!” sparingly when congratulating a user. Overuse is cheeky.

Accessibility

Include the role="alert" attribute on the mds-notification element.
Include role="alertdialog" when the notification also provides interactive controls, such as an “Undo” button, that provide feedback and dismiss the notification.
Dismiss notification at any time by clicking the close icon, remove--s.

Code Reference

CSS Class References

Class	Applies to	Outcome
`.mds-notification--with-close-button`	`.mds-notification`	Indicates the notification component to layout the block with close button, so that the notification text will not overlap the close button at the right.
`.mds-notification--popup`	`.mds-notification`	Indicates the notification is a popup.
`.mds-notification--fadeout`	`.mds-notification`	Hides the notification popup, will animate fade-in effect of notification upon removal of this class.

Link Template