Skip to main content

Modal

Display critical information or introduce a decision over the page content.

View in StorybookExternal link icon

Types​

Modals come in two types: regular and destructive.

Regular modal​

Use a regular modal to communicate important information and prompt users with short forms.

Destructive modal​

Use a danger modal when:

  • Users need to perform an action that will negatively impact their experience.
  • There is an issue that blocks the user from moving forward.

Behavior​

When displayed, modals disable app functionality and stay on the screen until users dismiss them or take the necessary action.

We also recommend using a Side modal if you need more vertical space.

However, you can adapt the standard modal component by making its header and footer stick at a distance of 60 px from the top and bottom of the viewport (the content area will then be scrollable).

Anatomy​

  1. Title:

    • Keep the title brief and combine verbs and nouns to describe the task or purpose clearly.
    • Include the object of the modal action if it's available.
    • If you ask users to confirm an action, formulate the title as a question; ensure the question is concise and emphasizes the most important words.

  2. Content area (optional). Provide information and controls necessary to complete the task of the modal.

  3. Actions. Use the primary action to confirm the title prompt.

Size and alignment​

Alignment​

X-axis: center.
Y-axis: center minus 160 px.

Height​

We recommend keeping the modal height at 520 px—consider using a Side modal if you need more vertical space.

Width​

Size S: 440 px​

Use size S to communicate important information or when the modal contains a short and simple form.

Size M: 660 px​

Use size M when the modal contains a form with inputs that don't fit the size S modal.

Best practices​

Avoid nesting modals because retaining several critical contexts will impede user experience. Consider using a side modal with a stepper instead.

As an edge case, you can nest modals when requesting confirmation for destructive actions or interrupting users to prevent errors or loss of progress.