Modal

24.1

Modals provides essential information in a temporary context.

Modal

24.1

Modals provides essential information in a temporary context.

Modal

24.1

Modals provides essential information in a temporary context.

Design Library

React Library

Spec Doc

Overview

The modal component provides essential information that users need to acknowledge or help a user complete a task.

Usage

Modals are used to present critical information or request user input needed to complete a user's workflow.

Use modals to confirm a user's decision.
Use modals to notify the user of urgent information.
Use modals to request an immediate response from the user.
Modals need a trigger(button) to open.
Modals need an overlay behind them and over the page.
Use sparingly to limit the disruption to the user.

Anatomy

Header: Contains a title, the question mark icon, and the close icon.
Content: Contains the information and/or controls needed to complete the task.
Footer: Contains the main actions needed to complete or cancel the task.
Close icon: To Close the dialog
Overlay: Screen overlay that obscures the on-page content.

Variants

Confirmation

Standard modal for confirming actions or providing important information.

Fullscreen Modal

Expanded modal that takes up the entire screen for complex tasks or detailed information.

Content width: Floating

The default footer behavior is floating, we try our best effort to keep the buttons close to the form.

Content width: Fixed

We fixed the footer to the bottom of the page when the content inside the form overflows the page as we want the actions to be visible at all times.

This behavior is dynamic meaning if there is any change in the page that forces the content to overflow the footer will automatically stick to the bottom of the page.

Full page width: Fixed

We only offer fixed full page views. This modality is 'Only available' when the content takes the whole width of the page. This is discouraged for forms.

This is more common in visualizations.

Footer Patterns

There are two types of footers available and they depend on the context in which they are displayed.

Content width: Most commonly used (99% of the use cases)

Full Page width: Only used on full-page visualizations.

Content Guidelines

We use fullscreen modals for complex tasks or detailed information, and confirmation modals to validate major actions before they are carried out by the user.

We follow these basic rules while writing content for modals:

Voice: Be insightful and clear; do not use heavy jargon.
Tone: Be helpful and do not blame the user.
Language: US English
Voice Structure: Active voice
Casing: Titles in title case, description in sentence case, and CTAs in title case.
Punctuation: Use no period for short sentences or sentence fragments. Use full punctuation only when the message is a complete sentence. Do not use exclamation (!) and ellipsis (…).
Words and phrases to avoid: Please, successfully, oops, sorry, uh-oh, something went wrong, you shall, you can.

❌ Don't: Are you sure?

Structure of an effective confirmation modal message

Title: Define the action on which we need confirmation from the user and align it with the primary CTA. Do not ask the user, "Are you sure?" as this does not carry enough context, reduces accessibility, and sounds informal.
Description: Convey what will happen if the user continues with this action e.g., if the said action cannot be undone, will it lead to any fundamental changes, etc.
Primary CTA: Represent the main action being confirmed—the action the user is intentionally choosing to perform.
Secondary CTA: Let the user safely exit the action without making any changes.

Examples

Scenario 1: The user is trying to delete an external storage

Content

Title: Delete External Storage Dell PF 1
Description: If you continue with the delete, this storage configuration cannot be recovered
Primary CTA: Delete
Secondary CTA: Cancel

Scenario 2: The user is trying to disable Flow Network Security

Content

Title: Disable Flow Network Security
Description: If you continue to disable, all security policies in Monitor or Enforce mode will be deactivated. This will remove protection from the VMs defined in these policies.
Primary CTA: Disable
Secondary CTA: Cancel

Accessibility

Keyboard Navigation

Tab order should follow interactive elements top to bottom and left to right as a logical reading order
[Esc] to close modal.
Closing should return focus back to the trigger button.
if that element no longer exists, focus should move to the next element.

Help make this page more useful.

Send Feedback

Help make this page more useful.

Send Feedback

Help make this page more useful.

Send Feedback

‹ Menu

Multi-Select Input ›