components icon

Message Bar

Message bars are non-modal semantic dialogs that can be displayed at the top of the page or contextually within a task flow.

Status

PublishedElement can be used in production
Documentation
PublishedElement can be used in production
PublishedElement can be used in production
Adobe XD
Adobe XD Kit
In backlogElement is in backlog
ExperimentalElement offered for testing and feedback. Not intended for use in production.
Angular
Angular
In backlogElement is in backlog
React
React
In backlogElement is in backlog

What's new

The message bar component was previously named “Informational Alert” and was featured in the “Notifications" section of DDS v1. This component has been competely redesigned and now includes semantic background colors and icons, as well as link and text styling that match the updated font ramp and color palette. Additionally, a timer is included as an optional feature to allow an auto-dismiss behavior.

When to use

ComponentUse cases
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.
NotificationA notification is a non-modal, passive dialog that keeps users informed without blcoking 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.

Anatomy

The parts of a message bar, labeled 1 through 7.

Message bars can consist of seven primary elements. The only elements that are required are the message background and body text.

  1. Message background: color-coded, depending on the semantic context.
  2. Icon: optional visual representation of the semantic type of message.
  3. Body text: content that relays the intent of the message.
  4. Link: optional link to provide more context or prompt user action.
  5. Timer: optional countdown that auto-dismisses the message. It is not intended for use with messages that include actions, warnings, errors, or critical information.
  6. Dismiss icon: optional icon to close the message.
  7. Elevation: for global message bars only, shadow-bottom/elevation-2 effect is applied.

Feedback