MessageBox

A Message box can be used in sign up or submission cases where specific information or action is required by the user.

When to use

When the information is available, persistent until actioned upon and in context to the page or interface the user is at.

If no specific user action is required (use banner instead)

Best practice

Always use an icon and color combination relevant to the urgency of the message itself

Only use MessageBox where other components/elements fall short in explaining or highlighting the importance of the message.

Variants

There are 4 variants of the MessageBox, each pertaining to the context or urgency of the message: Actionable (Neutral), Informative (Neutral), Critical (Error) and Positive.


Actionable (Standard)	Informative (Neutral)
Standard variant to be used to convey an actionable message	To be used with neutral or less important messaging


Critical (Error)	Positive
To be used for alerting and critically important error messaging	To be used for highlighting successful and positive messaging such as a discount or deal.

Placement

The MessageBox is persistent until actioned upon and always aligns to the grid on a page outside of the pages other patterns.

A MessageBox on a page

Content

Label copy should:

Ideally be no more than 1 sentence.

Be descriptive and contextual, using human language.

Body copy should:

Ideally be no more than 2 sentences.

Be descriptive and contextual, using human language.

Provide the user with an actionable option.

Accessibility

WIP