​​​🍄​Modal Dialogs

​​Definition

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

​​Visual Examples

​​
 
User-uploaded image: Screen+Shot+2021-02-17+at+1.50.31+PM.png
​​

​​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

​​https://www.figma.com/file/XbSxsYfvX17wGgArPxK22f/%F0%9F%8F%94-Mountaineer-Design-System?node-id=8%3A39

​​Related Components

​​