Modal

Modals are a type of dialog that are used to present critical information or request user input needed to complete a user’s workflow. Modals interrupt a user’s workflow by design. When active, a user is blocked from the on-page content and cannot return to their previous workflow until the modal task is completed or the user dismisses the modal. While effective when used correctly, modals should be used sparingly to limit disruption to the user.

Modal dialogs are commonly used for short tasks, such as editing, adding or managing content. If a user needs to repeatedly perform a task, consider making the task do-able from the main page.

Variations: Standard States: Default (expanded)