Modals are used to overlay content above an interface. They are intended to capture the user's attention in order to inform or shift focus to a pertinent task.

Modals can be used in various ways such as to confirm important or potentially destructive actions (e.g., deleting a message or upgrading a plan), to provide additional information, and to block user interaction in order to force action on critical tasks (e.g., billing errors, disconnected accounts, service outages, etc...)

Backdrop

All modals utilize a backdrop that overlays the site content and sits below the modal window. The backdrop dials back app UI and provides focus for the window and it's content.

Window

The Modal window houses content, and controls.

Modal Header

Modal Header allows us to add content like a title or actions to the top of a modal.

Title

The title appears in the top left corner of the modal window. A title isn't required, but is strongly recommended for most typical applications of Modal.

Actions

Actions are typically used in Modal Header when the content of the modal is free form and the subsequent action isn't dependent on the completion of a linear process.

Close

The , used to close the modal, is always present in the top right corner unless actions are used in Modal Header. If actions are used in Modal Header, the action is omitted.

Cancel

• "Cancel", as a standalone action, always begins with a capital letter.
• destructive actions should always be paired with a clear option to cancel.

Modal

The content we use in a modal is flexible to accomodate a wide range of use cases and needs. We can offer some rough direction on some common elements.

Text

• Text in the body of a modal should almost always be left aligned.
• Except when paired with expressive illustrations or imagery. In this case, we typically text align center.
• Try to keep line lengths to around 15 words or 75% of the width of your window.

Illustrations and imagery

• Illustrations and imagery can use white backgrounds or full bleed color.
• When pairing illustrations and imagery with text, consider center aligning text in expressive environments.
• If the imagery is being used in a more productive, supportive, long-form role where legibility is the primary concern, left aligned text can be used.

Forms

Using a form in a modal follows all the same principles as using a form anywhere else. For more detailed information about how to use forms, take a look at our forms documentation.

• Forms should be a single column when possible.
• Group related information in a logical sequence.
• Tailor the length of form fields based on the content.
• Use labels to describe form fields.

Modal Footer

Modal Footer allows us to add content like a actions or informational text to the bottom of a modal.

Information

Sometimes it's necessary to provide additional information related to the modal content.

Actions

Actions are typically used in Modal Footer when the content of the modal is a linear experience, like a form, and the subsquent action depends on it's completion.

If actions are used in Modal Footer, an X is always available in the top right to close the modal.

Best Practices

• An action taken from a modal should not open another subsequent modal
• Since a modal draws the user's attention from other tasks and requires an action to be taken in order to close it, consider the user and necessity of the modal.