Modals

Modals are components that take focus and overlay on top of other content on the page. Modals are used to get user attention for important notices, to request user input or decisions, and in situations where the user is required to interact before continuing. Both the modal and alert dialog components are modal dialogs: they interrupt interactions with the rest of the page, whereas non-modal dialog boxes allow users to interact with other parts of the page.

On this page

Interactive Demo

This demo lets you preview the modal component, its variations, and configuration options.

Modal

Open in Storybook

Tip: In order to customize the width of the Modal, you can use the innerContainerClassName prop. For example, innerContainerClassName="col-md-6 pad-0" (note that pad-0 is needed to remove unnecessary padding from the col-md-6 class).

Modals

1. Modal

A modal is an element that blocks interaction with the rest of the UI until dismissed or completed. It is commonly used for task-completion such as filling out a form or confirming details, multi-step processes such as on-boarding, or to display additional information or content without navigating away from the main screen.

2. Alert Dialog

An alert dialog is a specific type of modal window designed to immediately capture the user’s attention by conveying urgent information or requiring a response. It interrupts the user’s current workflow, blocking interaction with the main interface until the alert is acknowledged or dismissed. Common examples include error notifications, confirmation prompts, or critical warnings.

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.