<h2>Anatomy</h2>
<p>The overlay component contains only one element, which is the overlay itself. It can be blurred or not, depending on its kind.</p>
<details data-name='image-block' data-images='[{"alt":"Overlay component","caption":"The overlay consists of only one element:\n\n1 - Overlay: a temporary transparent layer that covers page content","url":"https://dds.dell.com/site/production/8c/07/Overlay_Anatomy_a46c8f39a6.png"}]' data-numberofcolumns='1'></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/overuse-of-overlays/","type":"External"},"title":"Overuse of overlays","description":"Read the Nielsen Norman Group&#39;s article on overlay.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/mobile-instructional-overlay/","type":"External"},"description":"Read the Nielsen Norman Group&#39;s article on overlay in mobile experiences.","title":"Overlay in mobile","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

Overlay is always paired with other components, such as drawers, modals, or loading indicators. It is a temporary, transparent element that covers the page content. Overlays are used to shift the user’s focus to a new content element or to block user interaction during a process.

### Focusing interaction

This usage directs the user’s focus and attention to the desired action. In this case, the overlay can be interactive. If the user selects a location outside the focused component, the overlay is removed.

This usage is common with a drawer. When the drawer component is open, an overlay appears behind it, shifting the user’s focus from the page to the drawer. Read more about [drawer usage guidelines](https://www.delldesignsystem.com/components/drawer/) on the corresponding component page.

<details data-name='image-block' data-images='[{"alt":"Example when overlay is used to shift user’s focus","caption":"Example when overlay is used to shift user’s focus","url":"https://dds.dell.com/site/production/fc/1c/Overlay_Usage1_8c1d09d031.png"}]' data-numberofcolumns='1'></details>

### Blocking interaction

An overlay can be applied to block user interaction. In this scenario, the overlay blocks the user from viewing the page’s content, preventing interaction with page elements or returning to the previous workflow until the task is completed or the user dismisses the modal.

This usage is common with a modal containing critical tasks that require completion or acknowledgment, or with a loading indicator that requires wait time for completion. Read more about [modal](https://www.delldesignsystem.com/components/modal/) and [loading indicator](https://www.delldesignsystem.com/components/loading-indicator/) usage guidelines on their component pages.

<details data-name='image-block' data-images='[{"alt":"Example when overlay is used to block user interaction","caption":"Example when overlay is used to block user interaction","url":"https://dds.dell.com/site/production/07/de/Overlay_Usage2_824b6d326d.png"}]' data-numberofcolumns='1'></details>

## Kinds

Overlays can be used as a default or blurred overlay. 

Use a default overlay when you want to add a layer that keeps the page content visible but still wants to shift the user’s focus and direct them to a specific component or process. 

Use a blurred overlay when you don’t want the user to interact or view the page content behind a focused task. Not all browsers support this effect. In those cases, the overlay will display the nonblurred default state.

<details data-name='image-block' data-images='[{"alt":"Example of a default overlay covering the visible page with a transparent, darkened layer.","caption":"A default overlay covers the visible page with a transparent, darkened layer.","url":"https://dds.dell.com/site/production/57/81/Overlay_Kinds_Square_VA_6da52c5825.png"},{"alt":"Example of a blurred overlay covering the visible page with a blurred layer.","caption":"A blurred overlay covers the visible page with a blurred layer.","url":"https://dds.dell.com/site/production/00/92/Overlay_Kinds_Square_VA_2_6ed0579030.png"}]' data-numberofcolumns='2'></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.

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)

#### [](https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html)Maintain user interaction blocked until it is dismissed

When using an overlay with the intention to block any interaction, the user should not be allowed to interact with any element on the page outside the 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, [2.1.1 Keyboard](https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html), [2.4.3 Focus Order](https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html)

Overlay

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

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

OVerlay

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

<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?id=components-overlay--docs&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-overlay--basic)

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

An overlay is a temporary transparent layer that covers page content, shifting focus to a new content element.



<p>AI Chat Toolkit has moved! You can now find it under the AI section.</p>


AI Chat Toolkit Redirect

<p>The DDS Feedback Form has been updated to point to Service Now (the new official intake form). Please <a href="/resources/videos/servicenow-overview">review this video</a> to learn more about how to interact with our team. Although the tool and process changed, our team expects to continue providing the same support as before.</p>
