🚧 This website is work in progress 👷
Components
Overlay
Published
Modal

Modal are surfaces that display content and actions on a single topic.

Modals communicate information via a secondary window and allow the user to maintain the context of a particular task.

Use the Modal Wrapper component to encapsulate your Modal within a button.

Usage

When to use

  • Grab the user’s attention: Use when you want to interrupt a user’s current task to catch the user’s full attention to something more important.
  • Need user input:Use when you want to get information from the user. Ex. sign up or login form.
  • Use when you want to show additional information without losing the context of the parent page. Ex. showing larger images or videos.
  • Use when you want to show information that is not directly related to the parent page or other options that are “independent” from other pages. Ex. notifications.

When not to use

  • Long content: Avoid using modal dialogs when the content needs a scrollbar.
  • Long forms: Do not use when a long form is displayed.
  • Complex decision making: Avoid modal dialogs for complex decision making that requires additional sources of information unavailable in the modal.

Reference

Edit this page

References