Modal

Modals (or dialogs) display important information that users need to acknowledge. They are overlays that prevent users from interacting with the rest of the application until a specific action is taken. They can be disruptive because they require merchants to take an action before they can continue interacting with the rest of the site. It should be used thoughtfully and sparingly.

Anatomy

Options

Title

All modals must have a title. Titles appear in bold at the top of the dialog and use a few words to convey the outcome of what will happen if a user continues with an action.

Behaviors

Behaviors

Modals should:

• Require that the user take an action.
• Close when the user presses the X button, the Cancel button, the Esc key, or when they complete the main action.
• Make all content behind the overlay become inactive.

Usage guidelines

Keep it simple

Use modals when merchants must complete an action before they can continue with the main workflow. Avoid using modals to display complex forms or large amounts of information.

Two buttons only

Don't use more than two buttons (primary and secondary) at the bottom. This prevents unclear action hierarchy and crowding on mobile screens. Since modals are for focused tasks, they should have focused actions. In some cases however, a tertiary action may be appropriate.

Button layout

The cancel action should always be to the left, while the main action is to the right. Buttons are placed at the bottom of the box.