components icon

Notification

A notification is non-modal dialog. It shows users contextual, timely, and noncritical feedback and messages.

Status

PublishedElement can be used in production
Adobe XD
Adobe XD Kit
In backlogElement is in backlog
PublishedElement can be used in production
Web Components
In backlogElement is in backlog
React
React
In backlogElement is in backlog
Angular
Angular
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 non-modal, 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 non-modal 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