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.

 

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

 

 

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.

 

Footer

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

 

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.

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

 

 

 

 

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

 

 

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

 

 

 

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)

 

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