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
Type=Default
Default option and used in most situations
Type=Delete
Used for a final confirmation when deleting an item, resource, or property
Type=Inner Page
Used when there is a secondary, conditional step based on the intial modal selection
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=Delete
Type=Unsaved changes
Type=Slot
The slot component is meant to be swapped out with a local modal content component. Create the elements you want to include in your modal in a new frame, turn it into a local component in your file and give it a name like "_Slot / Modal / {nameOfModalContent}" so you can quickly find it in the component property swap.
By using slots, modals used outside of the main Aurora Design System file remain attached to the parent modal component, allowing them to still receive updates and documentation connections while being able to manipulate the body content.
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
Type=Default
Type=Delete
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.
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
The type of modal can be quickly changed using the component property panel in Figma. If using a Delete modal header, be sure to update the footer to the Delete variant as well.
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=medium
🟢 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
Do
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
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
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 Xbutton 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