Modals

Coded Components

Helper classes: Looking for a complete list of helper classes for these components?View helper classes

Redlines: We don't include redline comps because it's always more accurate to use developer tools to inspect the coded components, or a plugin such as the Prism Redline Tool.

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" aria-hidden="true" style=""> <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 Modal</button> </div>

No items found.

Heading

No items found.

Usage

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

Do.

Don't.

Do.

Don't.

Do.

Don't.

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

Accessibility

Redlines

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.