Overview

Messages display low priority content directly on the page and are not dismissable. They should be used within other elements to convey helpful information in an unobtrusive way.

infoThis is a primary message
helpThis is a secondary message

Usage

Use when

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

Don’t use when

  • Alerting the user of a high priority error. Instead, use an Alert .
  • Alerting the user of an out-of-context event. Instead, use a Toast .

Specifications

info This is a primary message.
  • Fills the width of its container.
  • Should have an accompanying icon to the left of the message text. When the text spans multiple lines, the icon should remain aligned to the top.

Behaviors

  • Messages should remain static on the page. They should not be dismissible.

Editorial

  • Messages should be brief, full sentences, with proper punctuation.
  • They should provide the user with helpful, contextual information about a possible action or a set of data.

Accessibility

  • Make sure the message is read by screen readers.
  • Do not use the role="alert" attribute.