Skip to main content

Messages

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

Specifications

Atoms

Messages Atoms

Messages Anatomy

  • 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.

States

Messages States

Sizing

Messages Sizing

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.
Last updated March 2, 2023.