<h2>What’s new in v3</h2>
<ul>
<li><strong>Sizes:</strong> Medium and large sizes are now consolidated into a single desktop size, with mobile and desktop breakpoints defining minimum and maximum width and height.</li>
<li><strong>Maximum height:</strong> Recommended modal maximum height is 80% of the viewport height.</li>
<li><strong>Header text:</strong> Header text is limited to one line, and a truncated text setting has been added to enforce this.</li>
<li><strong>Design tokens:</strong> Provide a unified set of values for key properties, ensuring consistency across components and enabling easier customization. Learn more on the <a href="/getting-started/tokens">tokens page</a> and view the component’s token values in its <a href="?tab=Tokens">tokens tab</a>.</li>
</ul>
<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>
<p>A modal contains four main elements.</p>
<p>This component supports the use of slots. For more details about how to use slots, see the <a href="/components/modal?tab=Design#design-layout">layout</a> section.</p>
<details data-name='image-block' data-images='[{"alt":"The anatomy of a modal, labeled 1 through 4.","caption":"1. Heading: The title of the modal. Clearly communicates the purpose of the dialog.\n2. Body: The main message text. Provides guidance, context, or instructions for the user.\n3. Dismiss icon: Closes the modal without taking any action.\n4. Button group (optional): A set of action buttons. Use when the modal requires user decisions.","url":"https://dds.dell.com/site/v3/components/modal/modal-anatomy.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details><h2>Resources</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' data-hideWidget='false'></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

Clearly explain what the user needs to do to dismiss the modal or resolve the issue. Write instructive and clear text.

#### Button guidelines

Button placement depends on the breakpoints. For mobile breakpoints (599 px and below), the buttons should be justified at the bottom of the modal. For desktop breakpoint (600 px and above), buttons should be right aligned. Follow the [usage guidelines](/components/button?tab=Design#design-usage) for filled and outline buttons.

#### Overflow content

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

## Layout

#### Building block

A slot is available in this component to support flexible composition. It allows users to place additional elements such as images, text blocks, or other components while preserving the component’s layout, padding, and visual consistency.

<details data-name='image-block' data-images='[{"alt":"","caption":"","url":"https://dds.dell.com/site/v3/components/modal/modal-slot.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

#### Modal overlay

A modal contains a transparent background overlay which partially obscures the content behind the modal. The overlay interrupts 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/v3/components/modal/modal-layout.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Sizes

The modal is responsive and adapts to different screen sizes. It uses two breakpoints: mobile and desktop.  The modal’s width ranges from a minimum of 300px to a maximum of 800px.

The component remains centered both horizontally and vertically on the screen. The maximum height is limited to 80% of the viewport height to ensure it fits comfortably on screen and remains usable.

#### Desktop

<details data-name='image-block' data-images='[{"alt":"Desktop breakpoint applies to screens 600 px and above. The modal scales up to a maximum width of 800 px.","caption":"\nDesktop breakpoint applies to screens 600 px and above. The modal scales up to a maximum width of 800 px.","url":"https://dds.dell.com/site/v3/components/modal/modal-size-large.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Mobile

<details data-name='image-block' data-images='[{"alt":"Modal centered on a medium or large screen.","caption":"\nMobile breakpoint applies to screens 599 px and below. The modal scales down to a minimum width of 300 px.","url":"https://dds.dell.com/site/v3/components/modal/modal-size-small.png"}]' data-numberofcolumns='1' data-hideWidget='false'></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 headings

For modal headings, 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 heading text. For the modal body, use normal punctuation rules.

Design

## Tokens

Component tokens define the visual decisions used by this component. Use these tokens to adjust the component while preserving consistency and accessibility across the system.

The table below lists all tokens consumed by the component, including their name, collection, associated CSS variable, and a preview.

For more details about tokens and how they work across the system, see the [tokens documentation](/getting-started/tokens).
| Name                                 | Collection | CSS var                                           | Preview   |
| ------------------------------------ | ---------- | ------------------------------------------------- | --------- |
| message-bar/gap                      | Component  | `var(--dds-message-bar-gap)`                      | -         |
| message-bar/padding                  | Component  | `var(--dds-message-bar-padding)`                  | -         |
| message-bar/min-height               | Component  | `var(--dds-message-bar-min-height)`               | -         |
| border/radius/xs                     | Semantic   | `var(--dds-border-radius-xs)`                     | -         |
| color/background/INFO/subtle-rest    | Semantic   | `var(--dds-color-background-info-subtle-rest)`    | #D9F5FD   |
| spacing/sm                           | Semantic   | `var(--dds-spacing-sm)`                           | -         |
| icon/size/xs                         | Component  | `var(--dds-icon-size-xs)`                         | -         |
| message-bar/icon-height              | Internal   | `var(--dds-message-bar-icon-height)`              | -         |
| color/text/INFO/rest                 | Semantic   | `var(--dds-color-text-info-rest)`                 | #0063B8   |
| button/gap/xs                        | Component  | `var(--dds-button-gap-xs)`                        | -         |
| button/padding-horizontal/xs         | Component  | `var(--dds-button-padding-horizontal-xs)`         | -         |
| button/size/xs                       | Component  | `var(--dds-button-size-xs)`                       | -         |
| border/width/xs                      | Semantic   | `var(--dds-border-width-xs)`                      | -         |
| color/background/SURFACE/neutral     | Semantic   | `var(--dds-color-background-surface-neutral)`     | #FFFFFF   |
| color/text/BRAND/rest                | Semantic   | `var(--dds-color-text-brand-rest)`                | #0063B8   |
| button/background/ghost-rest         | Component  | `var(--dds-button-background-ghost-rest)`         | #40586D00 |
| color/text/NEUTRAL/rest              | Semantic   | `var(--dds-color-text-neutral-rest)`              | #1D2C3B   |
| message-bar/timer/height             | Component  | `var(--dds-message-bar-timer-height)`             | -         |
| color/background/INFO/base-rest      | Semantic   | `var(--dds-color-background-info-base-rest)`      | #0672CB   |
| color/background/SUCCESS/subtle-rest | Semantic   | `var(--dds-color-background-success-subtle-rest)` | #E9F5CE   |
| color/text/SUCCESS/rest              | Semantic   | `var(--dds-color-text-success-rest)`              | #436F00   |
| color/background/SUCCESS/base-rest   | Semantic   | `var(--dds-color-background-success-base-rest)`   | #4F7D00   |
| color/background/WARNING/subtle-rest | Semantic   | `var(--dds-color-background-warning-subtle-rest)` | #FEEFCB   |
| color/text/WARNING/rest              | Semantic   | `var(--dds-color-text-warning-rest)`              | #925400   |
| color/background/ERROR/subtle-rest   | Semantic   | `var(--dds-color-background-error-subtle-rest)`   | #FFECEE   |
| color/text/ERROR/rest                | Semantic   | `var(--dds-color-text-error-rest)`                | #BB2A33   |

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-modal--docs)
<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-modal--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/?path=/docs/components-modal--docs)
<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?args=&id=components-modal--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/?path=/docs/components-modal--docs)
<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-modal--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

A modal is a dialog that temporarily blocks the main experience to show critical information or user confirmation or action completion before proceeding.