Modals

A window that's overlaid on the page, suspending previous interactivity until the modal is interacted with.

Modals must be initiated by user interactions, whether they are intentional or unanticipated. Triggers can be any CTA, icon, image, text link, interaction or operation step.

  • If text is the trigger, it receives the same visual treatment as a link.

Modal content must require users to interact in order to proceed. The buttons at the bottom of a modal can be replaced by a custom set of controls.

If more than one button is used ...

  • There should be no more than 3 buttons in the group, with only one primary CTA.
  • The buttons should be right-aligned, with the primary button on the far right. This is important because in some cases the primary action is not easily reversible, so focus is placed upon the least "destructive" action (e.g. Cancel) before the most destructive.

Modal content should be brief and involve a single decision to discourage the need for an internal scrollbar. For content that will likely require scrolling, or that involves more than a single decision, consider using an off canvas or workflow page.

Users should be able to dismiss a modal by two methods - selecting its X button, or one of the buttons at the very bottom.

Selecting outside of a modal (on the tinted background) to close it is an optional feature, but discouraged because users who are accustomed to advertisements appearing in modal overlays may instinctively close them before looking at their content.

Never initiate modals on top of existing modals.

Never replace one modal with another without returning to the parent page content.

Modal Preceding Navigation

Often times a modal will precede navigation to a new browser tab or window, especially when this is to a third-party site. Navigation links to the same domain should not open a new browser tab or window, unless the current context is highly sensitive (for example, the checkout workflow).

If the content for the new tab or window can comfortably fit within a modal, then it's preferable to show the content within a modal without requiring users to navigate away from the current context.

A modal window should always be used before navigating away from a Dell Technologies site if the destination is a third-party site that collects sensitive or private data, or if the action involves downloading software.

Keyboard Operation

Tab and Shift + Tab do not move focus outside a modal. Modal dialogs do not provide a means for moving keyboard focus outside the modal window without closing the dialog.

Tab key moves focus to the next tabbable element inside the modal. If focus is on the last tabbable element, moves focus to the first tabbable element inside the modal.

Shift + Tab keys moves focus to the previous tabbable element inside the modal. If focus is on the first tabbable element, moves focus to the last tabbable element inside the modal.

Escape key dismisses the modal. This is equivalent to selecting a close "X" or "Cancel" button within the modal.

Do's and Don'ts

Types

Variants

Common Button Labels and Usage

Title case, 2-3 words maximum.
Do not combine actions in a label (exception: "Customize & Buy").
If standard labels don't fit the button's purpose, align label with the task the user is attempting.

Please refer to the Dell Technologies branding website, https://brand.delltechnologies.com/faq/#voice, for further information regarding call-to-action labels and usage.

Button Label:
Corresponding Action:
Add to Cart
Search
Cancel
Save
Edit
Delete
Continue
Next/Previous
Submit
Select
Sign In/Sign Out
View Details
Ok/Cancel
Learn More
Close
Takes users to Cart page, with item added
Used for search buttons
Takes users back to entry point for a task
Used to save an item
Navigates users to change an item
Deletes an item on the page, usually with a verification step
Used as progression
Used as forward and backward navigation (Next is primary, Previous is secondary)
Used to submit a task or info
Used for choosing items in a task flow
Authentication standard, for consistency do not use Log In/Log Out or Signin/Signout
Used instead of “Select” in cases of product details or within learn content
For use in modal verification steps when more specific CTAs will not fit due to space
Used to link users to more learning content or contextual help
Used within modal windows

Standard Modal

<div> <!-- The first div is used as a full screen background overlay. There are a few components that use this overlay so it only needs to be added once preferably at the top of the page below the body tag. This is a usable example. <div id="dds__full-screen-overlay" class="dds__overlay"></div> --> <div id="exampleModal" tabindex="-1" class="dds__modal dds__fade" role="dialog" aria-labelledby="dds__modal-title1"> <div class="dds__modal-dialog" role="document"> <div class="dds__modal-content"> <div class="dds__modal-header"> <h3 class="dds__modal-title" id="dds__modal-title1">Sample Title</h3> </div> <button class="dds__close" data-dismiss="dds__modal" aria-label="Close"> <span class="dds__icons dds__close-x" aria-hidden="true"></span> </button> <div class="dds__modal-body"> <p>Modal body text goes here.</p> </div> <div class="dds__modal-footer"> <button class="dds__btn dds__btn-secondary" data-dismiss="dds__modal">Close</button> <button class="dds__btn dds__btn-primary">Save changes</button> </div> </div> </div>
</div>
<!-- Button trigger modal -->
<button role="button" class="dds__btn dds__btn-primary" data-toggle="dds__modal" data-target="#exampleModal">Launch demo modal</button> </div>

No items found.

No items found.

No items found.

To be determined.

The W3C Web Accessibility Initiative (WAI) develops standards and support materials to help you understand and implement accessibility.

Please follow the best practices for modal dialogs from WAI-ARIA authoring practices 1.1.

Please also refer to these recommendations for dialogs from WAI-ARIA 1.1.

You may refer to these examples of modal dialogs from WAI-ARIA practices 1.1.