Forma 36

Modal

StorybookGithub
stable

Modal dialogs interrupt a user by isolating information that needs to be acted upon. They are often triggered by an action a user took, and should be used to inform, confirm or complete a task.

Table of contents

  1. Best practices
  2. Variations
    1. Modal position
    2. Modal sizes
  3. Writing guidelines

Best practices

  • Use modal dialogs to request information critical for a user to continue their current process
  • Use modal dialogs to warn users about a potentially destructive action they are taking
  • Use modal dialogs consistently across use cases
  • Do not use modal dialogs for nonessential information that is not related to the current user flow
  • Avoid modal dialogs that interrupt high-stake processes such as checkout flows

Modal variations

The Modal component can be configured in a number of different ways. Use this guidance to determine when to use certain variations:

Modal position (position)

Modal sizes (size)

Writing guidelines

  • Practice progressive disclosure. Eliminate extra details to keep copy concise and actionable
  • Focus on the objective of the modal dialog. Start each sentence with the objective when possible
  • To enable users to navigate quickly, write concise sentences that are easy to understand at a glance
  • Limit the number of concepts in each sentence. Write simple sentences for all audiences
  • To keep UX copy actionable use present tense for user interactions
  • Avoid “never,” “always” and other absolutes
  • Use contractions when possible
  • Avoid exclamation marks