<h2>When to use</h2>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Modal</td>
<td>Modals display important information that users need to acknowledge before moving ahead. They appear over the interface and block further interactions on the base page until an action is completed. Use in cases where a user&#39;s action is critical.</td>
</tr>
<tr>
<td><a href="/components/notification/">Notification</a></td>
<td>A notification is a nonmodal, passive dialog that keeps users informed without blocking access to the base page. The user can continue with the experience, regardless if the notification is still on screen. Use for interactions that aren’t critical.</td>
</tr>
<tr>
<td><a href="/components/message-bar/">Message bar</a></td>
<td>Global message bars display nonmodal messages that inform users of updates or changes to system status. Contextual message bars are most often used in task flows and forms, providing users additional context or information about a task. Either can be used for critical system alerts or passive feedback.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<details data-name='image-block' data-images='[{"alt":"The anatomy of a modal, labeled 1 through 4.","caption":"A modal contains four main elements. The header and button group are optional, whereas the message body and dismiss icon are required\n\n1. Header: an optional headline\n2. Body: message text\n3. Dismiss icon: to close the modal\n4. Call-to-action: optional button group","url":"https://dds.dell.com/site/stage/be/d6/Modal_Anatomy_9295fffc34.png"}]' data-numberofcolumns='1'></details>

<h2>Articles</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/modal-nonmodal-dialog/","type":"External"},"title":"Modal and nonmodal dialogs","description":"Read the Nielsen Norman Group&#39;s article on when to use modals.","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

### Task Interruption

Use modals sparingly and for critical tasks that require completion or acknowledgment, rather than passive notices or information. Modals are designed to interrupt a user’s flow and tend to remove the user from an experience. When a modal is triggered, an [overlay](/components/overlay/) blocks the user from viewing the page’s content, keeping them from returning to the previous workflow until the task is completed or the user dismisses the modal.



### Modal display

Use only one modal at any given time. Do not place modals on top of existing modals or replace them with another modal without the user’s action.



### Task resolution

Make sure to include clear steps that the user must take to dismiss or resolve the situation necessitating the use of the modal. Write instructive and clear text.



### Button guidelines

Button placement depends on the size of the modal. For extra-small (XS) and small (S) grids, the buttons should be justified at the bottom of the modal. For all other grid sizes, buttons should be right aligned. Follow the [usage guidelines](/components/modal/components/button/?tab=Design#layout) for primary and secondary buttons.



### Overflow content

If the content exceeds the height of the modal container, a scrollbar will appear. However, try to avoid requiring users to scroll, since it decreases usability. Modal content should never scroll horizontally; if more space is required, use a larger modal.



## Layout

### Modal overlay

A modal contains a transparent background overlay which partially obscures the content behind the modal. The overlay helps interrupt the on-page experience, so users can focus on the tasks outlined in the modal. The overlay should cover the page content and prevent the user from interacting with it until the action is complete or the modal is dismissed. While the overlay is a separate design element in the UI kit, the modal component incorporates the overlay in code. For more information on general overlay usage, visit the [overlay page](/components/overlay).

<details data-name='image-block' data-images='[{"alt":"Modal with background overlay.","caption":"The overlay’s transparent background blocks the page content behind the modal until the user completes an action.","url":"https://dds.dell.com/site/stage/89/57/Modal_Overlay_9e07ce1a64.png"}]' data-numberofcolumns='1'></details>



## Sizes

Modals come in three sizes: large, medium, and small. All three are designed to be centered horizontally and vertically on the screen.

### Large modal

<details data-name='image-block' data-images='[{"alt":"Large modal centered on an extra-large screen.","caption":"Large modals are 800 pixels wide, and are best used for grid sizes extra large (XL) and above.","url":"https://dds.dell.com/site/stage/8f/4d/Modal_Size_Positioning_Large_465eb7fb5d.png"}]' data-numberofcolumns='1'></details>

### Medium modal

<details data-name='image-block' data-images='[{"alt":"Modal centered on a medium or large screen.","caption":"Medium modals are best for medium (M) and large (L) grids, and are 496 pixels wide.","url":"https://dds.dell.com/site/stage/9c/c7/Modal_Size_Positioning_Medium_3b05100a8d.png"}]' data-numberofcolumns='1'></details>



### Small modal

<details data-name='image-block' data-images='[{"alt":"Small modal centered on a mobile screen.","caption":"Small modals are 300 pixels wide and should be used for breakpoints between 320 and 599 pixels","url":"https://dds.dell.com/site/stage/2c/b1/Modal_Size_Positioning_Small_88b50db591.png"}]' data-numberofcolumns='1'></details>



## Standards

### Accessibility

**Follow recommended focus behavior for modal interactions**\
For people who rely on a keyboard or assistive technology and not a mouse to navigate, it’s important that focus control is placed before, during, and after the modal call-to-action as the component has been engineered for the design system. Refer to [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal) for recommended modal focus behavior and expected keyboard interactions.\
WCAG 2.2: [1.4.13 Content on Hover or Focus](https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html), [2.4.3 Focus Order](https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html), [2.1.1 Keyboard](https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html)\
\
\
**Any modal not using a heading must still be labeled for accessibility**\
All modals require an accessible name, which is provided to users with assistive technology. Using a headline variant is strongly recommended, since it meets this requirement while providing the same experience for all users regardless of ability. If a modal has no headline, it should be labeled using aria-label or aria-labeled by.\
WCAG 2.2: [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html), [2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html)\
\
\
**Modal must trap users’ focus until it is dismissed**\
When using a modal, a user should not be allowed to interact with any element on the page outside that modal dialog until they dismiss it, either with the close button or by initiating an action.\
WCAG 2.2: [2.1.2 No Keyboard Trap](https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-trapping.html), [2.1.1 Keyboard](https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-trapping.html), [2.4.3 Focus Order](https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html)



### Content

**Body text**\
Modal content should be centered around task-oriented scenarios and what a user must do to complete that task. If the task is complicated or requires more than a few lines of instructional text, consider using another component or experience, such as a separate page in the workflow. If content exceeds the container height, an overflow scrollbar will appear, which may cause users to miss important context.\
\
\
**Capitalization**\
Use sentence case in headers and body text, unless referring to a proper noun. For buttons, use title case.\
\
\
**Modal headers**\
For modal headers, be brief and descriptive about the action a user must take to resolve the task. Try to use verb and noun combinations that clearly describe the dialog’s task or purpose. Header length should not exceed one line.\
\
\
**Punctuation**\
Do not punctuate button text or header text. For the modal body, use normal punctuation rules.

Design

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-modal--basic)

<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-modal--basic&viewMode=docs&websiteFrame=true'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/index.html?path=/docs/components-modal--basic)

<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?id=components-modal--basic&args=&viewMode=docs&websiteFrame=true'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/index.html?path=/story/components-modal--basic)

<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-modal--docs&viewMode=docs&websiteFrame=true'></details>

A modal is a dialog that intentionally interrupts a user’s page experience. It’s often used for critical information or for actions that require review or completion prior to returning to the task flow or page.