​​​🍄​Modal Dialogs

​
​Definition

​​Inform users about a task or contain critical information.

​
​Visual Examples

​
​Usage

  • ​​Appears in front of the app
  • ​​Purposefully interruptive - should be used sparingly
  • ​​If two actions are used, one is confirming and one is dismissing
  • ​​Requires a decision to be made before dismissal

​
​Principles

​​Focused: grabs user's attention
​​Direct: dedicated to completing a task/decision
​​Helpful: appears in response to an action with more info

​
​Types

​
​Priority

​
​High/Critical

​
​Behavior

  • ​​Interruptive by design
  • ​​Remains on screen until user dismisses

​
​Atomic Model Identification

​​Templates (fully baked UI in Features)

​
​Recommendations

  1. ​​Non full-screen dialogs are used in instances where the user needs to confirm something
  1. ​​Two actions: confirming and dismissing/cancel
  1. ​​Contain a "x" to dismiss

​
​Dos and Don'ts

​
​Do
​​Try to limit the number of interactions in a modal dialog and remove content that does not support the task. 
​​Don't 
​​Do not present the user with unclear choices and make sure choices are relevant to the modal's content.
​​
​​

​
​Content

​
​Accessibility Requirements & Resources

  1. ​​Mouse and keyboard interactions can be used to navigate throughout dialog and can either confirm or dismiss it.
  1. ​​When active, the dialog takes keyboard focus and users cannot interact with page content behind it.
  1. ​​Focus returns to the control that initially activated the dialog when dialog is dismissed. It can be dismissed it by:
  1. ​​Clicking a dismissive action (cancel, close)
  1. ​​Clicking the Back button

​
​Mountaineer Design System Link

​
​Related Components

​​