Modal

A dialog that displays interactive content a layer above the page

Healthy
Show details
Healthy
Published: February 21, 2024
Updated: February 21, 2024

Overview

Modals are disruptive overlays that block the page’s content until action is taken or the modal is dismissed. They should be used thoughtfully and sparingly.

🟢 Modal / Size=medium

 

Design

Structure

Header

The header comprises of 3 elements:

  • A leading icon (delete or warning modals) or back button (inner page modals)
  • The modal title
  • Close button

 

Modal header variants

Type=Default

Type=Default

Default option and used in most situations

Type=Delete

Type=Delete

Used for a final confirmation when deleting an item, resource, or property

Type=Inner Page

Type=Inner Page

Used when there is a secondary, conditional step based on the intial modal selection

Type=Warning

Type=Warning

Used for confirmation and inform the marketer that the action may have implications

 

 

Body

The body of a modal changes based on the modal use case, but can include:

  • copy
  • form elements
  • previews of resources and more

 

Common modal body examples

Below are some presets for common modals found in the product. These can be quickly interchanged using the component properties panel in Figma.

Type=Copy resource

Type=Copy resource

Type=Delete

Type=Delete

Type=Unsaved changes

Type=Unsaved changes

Type=Slot

Type=Slot

 

The footer comprises up to 3 action buttons that are aligned to the right. By default, all modals have:

  • a tertiary Cancel button
  • can include one primary/destructive button
  • can include one secondary/secondary destructive button

 

Modal footer variants

Type=Default

Type=Default

Type=Delete

Type=Delete

Type=Multi-step

Type=Multi-step

 

Confirmation banner

A modal can include a confirmation banner that slides from the bottom in situations where a complex form or process has been started in the modal. This will alert the marketer to either continue editing or discard the changes. There are some occasions where an action taken within a modal may prompt an additional confirmation. This is a solution to prevent stacking a confirmation modal on top of an addtional modal.

_Parts / Confirmation Banner / Type=Discard, State=End

_Parts / Confirmation Banner / Type=Discard, State=End

_Parts / Confirmation Banner / Type=Confirm, State=End

_Parts / Confirmation Banner / Type=Confirm, State=End

Variants

There are 4 variants of the modal

  • Default: used in most situations
  • Inner page: used when there is a secondary, conditional step based on the intial modal selection
  • Warning: used for confirmation and inform the marketer that the action may have implications
  • Delete: used for a final confirmation when deleting an item, resource, or property

 

Variants

Variants

 

 

Modifying the modal variant using the Figma component property panel.

Modifying the modal variant using the Figma component property panel.

 

Sizes

  • Small (470px): Used for warnings, deletions, and actions that don't require a large interface to complete
  • Medium (672px): Used for creation and editing of items like campaigns, templates, or journeys
  • Large (980px): Used for inserting content, selection with previews and for creation and editing where more space is needed, such as inserting a snippet or image

 

🟢 Modal / Size=small

🟢 Modal / Size=small

🟢 Modal / Size=medium

🟢 Modal / Size=medium

🟢 Modal / Size=large

🟢 Modal / Size=large

 

Guidelines

Use cases

Modals are generally used for two reasons:

  • CRUD (create, read, update, delete) of a resource
  • Confirmation of an action the marketer is trying to perform

 

Use case examples

Use case examples

 

  • Use sentence case for modal title
  • Use small modals for “delete” or “archive”
  • Use medium modals for “creation” and “editing”
  • Use large modals for “insertion” or “selection” with previews
  • Don’t place a modal on top of another modal
  • Don't use icons in modal footer buttons
  • Don't use small modals for “creation” flows
  • Don’t use medium or large modals for tasks like “delete” or “archive”

 

Content

  • Use modals when marketers must complete an action before they can continue with the main workflow.
  • Consider using a separate page for creation or updating unless there are fewer than ~3 fields.
  • Avoid using modals to display complex forms or large amounts of information.
  • Avoid multi-step modals. Under special circumstances, the inner page variant can be used, but should never nest more than one child page.
  • Changes to an input modal (form within a modal) should clear when the modal is closed.
  • If a modal has unsaved changes to a form or requires a secondary confirmation, use the confirmation banner property rather than a second modal on top of a previous modal
  • When applicable, bold the name of the resource the modal will be affecting.

 

Special cases

 

Creation

  • When creating a new resource, the title should always start with “New” followed by the name of the resource. Example: New email template
  • The primary button should start with “Create” followed by the resource name. Example: Create template

 

Copy

  • When copying a resource, the title should always start with “Copy” followed by the name of the resource and ending with a question mark. Example: Copy template?
  • The primary button should match the title, but should not include the question mark. Example: Copy template

 

Deletion/Archiving

  • When deleting or archiving a resource, the title should always start with “Delete” or “Archive” followed by the name of the resource and ending with a question mark. Example: Delete template?
  • The primary button should match the title, but should not include the question mark. Example: Delete template

 

Warning

  • If the modal is warning a user about unsaved changes, use the unsaved changes modal body preset component
  • Other warning modals that aren’t warning about unsaved changes should always ask a question in the title. Example: Publish journey?

 

Unsaved changes

Unsaved changes modals follow this formula:

  • Always use a warning modal
  • Title should be “Unsaved changes”
  • Body should read “This {resourceName} has been edited. Do you want to save your changes?”
  • Footer should include 3 buttons: Cancel (tertiary), Leave without saving (secondary), and Save and exit (primary)

 

Writing examples

Writing examples

Accessibility

  • Keyboard Navigation: Enable navigation, opening, and closing of modals using keyboard commands (Tab, Shift+Tab, Esc).
  • Focus Management: On opening, shift focus to the modal and trap it there until the modal closes. Return focus to the initiating element when closed.
  • Screen Reader Support: Use ARIA roles (role="dialog", aria-modal="true") to ensure modals are announced properly.
  • Labeling: Employ aria-labelledby and aria-describedby for modal titles and descriptions, aiding user context.
  • Close Mechanism: Offer clear modal closing methods (close button, clicking outside, Esc key) with appropriate labeling (aria-label="close").
  • Auto-focus Caution: When auto-focusing, prefer interactive elements and provide contextual guidance.

Dismissing modals

Marketers can't interact with the rest of the page until the modal is closed. To ensure Iterable supports both mouse and keyboard interactions, a modal can be dismissed by:

  • clicking the Cancel button in the footer
  • Clicking the X button in the header
  • Press Esc on a keyboard
  • Clicking anywhere on the scrim/overlay

 

Health

Is documented

The component is fully documented

Accessibile

Tested against WCAG 2.1 AAA accessibility guidelines

Tokens

This component uses tokens in both Figma and code

Figma component

Includes a link to a Figma component that has been imported to Supernova

Storybook

Includes a link to an external code repository

-

Status

The component has a health status indicated

Healthy