components icon

Notification

A notification is nonmodal dialog. It shows users contextual, timely, and noncritical feedback and messages.

Status

PublishedElement can be used in production
PublishedElement can be used in production
Angular
Angular
In backlogElement is in backlog
React
React
In backlogElement is in backlog
Documentation
PublishedElement can be used in production

What's new

Notifications have been redesigned to include call-to-action buttons and a date and time stamp.

When to use

ComponentUse cases
NotificationA notification is a nonmodal, passive dialog that keeps users informed without blocking access to the base page. The user can continue with the experience, regardless if the notification is still on screen. Use for interactions that aren’t critical.
ModalModals display important information that users need to acknowledge before moving ahead. They appear over the interface and block further interactions on the base page until an action is completed. Use in cases where a user’s action is critical.
Message barGlobal message bars display nonmodal messages that inform users of updates or changes to system status. Contextual message bars are most often used in task flows and forms, providing users additional context or information about a task. Either can be used for critical system alerts or passive feedback.

Anatomy

Diagram of the different parts of the notification, marked from 1 to 6.

There are six elements of a notification. The icon, dismiss function, date and time stamp, and call-to-action footer are optional.

  1. Icon: to represent the purpose of the notification
  2. Title: header overview of notification
  3. Dismiss icon: a direct action to close the notification
  4. Message body: a brief description of the purpose of the notification
  5. Date and time stamp: when the notification was generated
  6. Call-to-action: optional button group

Feedback