Skip to main content

Messages

Messages provide the user with contextual static information. They have a lower priority than a notification or prompt.

Messages example

Overview

Messages are used within other elements to convey status and helpful information in an unobtrusive way. Messages display content directly on the screen and are not interactive or dismissible. Messages provide supporting information or additional instruction about a data set, dialog, or screen. Messages are typically displayed at the top of the screen and convey information or status about the screen content as a whole.

Usage

Use when

  • Providing the user with helpful, contextual information about a possible action, set of data, or screen.

Don’t use when

  • Alerting the user of a high priority warning or error. Instead, use an Alarm.
  • Alerting the user of an out-of-context event. Instead, use a Notification.
  • There is a system-critical action the user must take. If the user should stop work and immediately attend to a problem or error, use an Alarm.
  • You need to communicate contextual information or status about an input field component. Use Helper Text instead.
Example Emphasis When to use

Low When useful information is required

Medium When user needs an inline message that requires attention.

High When the user needs an alert of a very important message on a page.

Low Generic message of less important information; can have an icon if needed.
Last updated May 22, 2024.