Modal

Usage

Modal dialog overlays on top of the main content of a page. It is used to focus the user's attention on a specific task and require interaction before they can continue browsing the site. Modal dialogs are disruptive and should be used sparingly and with caution.

Best practices

Do

Open modal dialogs on user’s request i.e., clicking a button

Don't

Don’t disrupt user’s workflow with modal dialogs that appear without user action i.e., for marketing purposes.

Do

Use a modal dialog to confirm decisions before proceeding

Don't

Don't use a modal dialog if confirmation is not necessary, or to give feedback to the user. Use Toast or Banner instead.

Don't

Don’t nest modals. If the situation requires a sequence of decisions, consider a different design pattern. Confirmation modals upon closing are an exception.

Anatomy

Header

Header provides a title that describes the context of the modal dialog and a close button in the top right corner.

Do

Use a brief and clear title that explains the context of a modal dialog.

Don't

Don’t use modal dialogs without a title.

Body

The body is used to display and provide the main functionality of the modal.

Don't

Avoid including navigation inside a modal dialog. A dialog should be used within a single context.

Footer

The footer provides a space for the main actions of the modal dialog.

Do

Always align the actions to the right side, with the primary action always at the far right.

Don't

Don’t overcrowd the footer with too many actions. Include max of 2 actions to provide a clear hierarchy.

Sizes

Modal dialog offers two sizes: medium and large. Each size defines the width of the modal dialog.

Medium (default)

Medium is the default size for modal dialogs. It's ideal for seeking confirmation from the user and presenting simple forms or data.

Large

Choose large size when presenting complex forms or dense data. Do not use it for confirmation dialogs.

Positioning

Modal dialogs are always displayed in the center of the screen with a visible background that covers the content behind them. Modal dialogs include safespace area between the modal and viewport equal to Space L.

Dismissing modal dialogs

Modal dialogs provide multiple ways to exit them:

• X button in top right corner
• Mouse click outside of the modal dialog
• Browser back button
• Escape key using keyboard
• Custom close button (Optional)

Do

Consider providing a “Cancel” button for modal dialogs that require action from the user.

Don't

Don’t provide custom close button in the footer for passive modal dialogs.

Do

Seek confirmation from the user if dismissing the modal dialog means losing progress.

Examples

Live Preview

Props

Slots

Events