Skip to Content Skip to Navigation

User Experience Toolkit

Messages

Distinct and consistent message styling keeps the user informed of the system's state.

Also known as alerts

What is the Solution?

Varied colored messages with corrosponding icons.

An Information Message

A Success Message

An Error Message

A Warning Message

A System Message

When to Use this Pattern

  • Success messages indicate successful completion of a task or operation.
  • Error messages indicate that something has gone wrong and needs to be resolved.
  • Informational messages indicate useful or relevant information.
  • Warning messages indicate a piece of information to the user that may be important, but not necessarily blocking progress.
  • System messages indicate a system problem - so that the user understands that it is not the fault of their action.

How to Use this Pattern

  • Notifications should not be used for large paragraphs of text (more than 3 lines). In such cases, create a short message and put explanatory text in a normal paragraph below the message.

Accessibility

Note that color alone should not be used to convey meaning so that messages are not obscured from the color-blind.

Implementation

Messages Code

Further Reading

Thanks for the feedback! It will help us improve your experience.