Message Boxes

A message box is a modal dialog box that appears in front of content to provide critical information or ask for a decision.

Design Usage

Dialogs are purposefully interruptive, so they should be used sparingly. Message boxes notify users of an event or ask the user to make a decision. Message boxes can have different types (states) to reflect the event that occurred. Message boxes appear as an overlay on the screen and require a response from the user before work can be resumed.

Use

• When the severity of information is critical enough to interrupt the user
• To display critical information
• For specific tasks that require the user to acknowledge or make a choice

Don’t Use

• If the information isn’t critical enough to require the user’s interaction
• For success messaging, use Toast instead

Anatomy

A message box consists of a Container, Title, message box Type Icon, Close Icon, Supporting Text, Buttons, and an Overlay.

1. Container
2. Title
3. Type Icon
4. Close Icon
5. Supporting Text
6. Buttons
7. Overlay

Title

• Use Title Case (the first letter of every word is uppercase, except for certain small words, such as articles and short prepositions)
• Use specific and short titles

Icon

• Confirm (question mark)
• Success
• Information
• Warning
• Error

Supporting Text

• Explain why the issue occurred in a specific and accurate manner
• Provide guidance for the user to complete the task (explain how to resolve the issue)

Buttons

• If there is a proposed action, use the primary call-to-action button (please see the Button Pattern Page for more details)
• Use button names that accurately reflect the action that will occur
• Avoid Yes/No buttons

Behavior

Message boxes present a distinct choice to users through their title, content, and actions. The actions are represented as buttons and forcing users acknowledge or make a choice.

Interaction

• Message boxes appear without warning, requiring users to stop their current task
• They stay on the screen until dismissed or an action has been taken
• Message boxes can’t be closed by clicking on the overlay

Position

• Message boxes are centered vertically and horizontally

• Avoid Scrolling

  For scrollable content, consider using a Modal

• Dismissing the message box

  Most message boxes can only be dismissed by clicking on the “Close” icon or a button

Types

Confirm

Confirmation message boxes give users the ability to provide final confirmation of a choice before committing to it.

Success

Success message boxes confirm action has been completed. In most cases consider using the MessageBar.

Information

Information message boxes provide the user with information about the state of the page. The user acknowledges the provided information does not involve a decision.

Warning

Warning message boxes are used to highlight a potential issue but allow the user to continue.

Error

Error message boxes interrupt the user with urgent information, details, or actions.