<h2>What&#39;s new in v3</h2>
<ul>
<li><strong>Elevation effect:</strong> Removed from the component variants. It can be adjusted natively in Figma panels.</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>
<p>Use overlays when you need to show content on top of the page so users can focus on it without losing their place.</p>
<p>Use overlays when:</p>
<ul>
<li>Showing extra details without navigating away.</li>
<li>Letting users complete a small task in context.</li>
<li>Focusing attention on important or required content.</li>
<li>Displaying something users must interact with before continuing.</li>
</ul>
<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":"1. Icon (optional): to represent the purpose of the notification\n2. Title: header overview of notification\n3. Dismiss button (optional): a direct action to close the notification\n4. Message body: a brief description of the purpose of the notification\n5. Date and time stamp (optional): when the notification was generated\n6. Call-to-action (optional): optional button group to trigger actions","url":"https://dds.dell.com/site/v3/components/overlay/overlay-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/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' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Notifications should be timely and relevant to the user’s task, clearly indicating when a message is delivered or when action is needed. Keep notifications in chronological order, limit message text to two lines, and use short, descriptive titles to provide clear context. When action is required, include clear next steps, and avoid unnecessary or duplicate notifications to reduce alert fatigue.

### Focusing interaction

For all [grid](/foundations/grid/) sizes except XS (extra small), notifications are positioned at the bottom-right of the page to help minimize user distraction.

<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/v3/components/overlay/overlay-usage-focusing.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### 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":"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/v3/components/overlay/notification-layout-slots.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Mobile breakpoint positioning

For viewport ranges 320 to 479 pixels (XS grids), notifications appear centered and at the bottom of the screen.

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

### Multiple notifications

Multiple notifications are stacked on top of each other and appear chronologically, with the newest at the top.

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

### Button grouping

Refer to guidance on [button specifications](/components/button/?tab=Design#layout) to know the correct steps when grouping buttons in a notification.

## 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

## 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   |
| -------------------------------- | ---------- | --------------------------------------------- | --------- |
| notification/gap                 | Component  | `var(--dds-notification-gap)`                 | -         |
| notification/padding             | Component  | `var(--dds-notification-padding)`             | -         |
| border/radius/xs                 | Semantic   | `var(--dds-border-radius-xs)`                 | -         |
| border/width/xs                  | Semantic   | `var(--dds-border-width-xs)`                  | -         |
| notification/min-width           | Component  | `var(--dds-notification-min-width)`           | -         |
| notification/max-width           | Component  | `var(--dds-notification-max-width)`           | -         |
| color/background/SURFACE/neutral | Semantic   | `var(--dds-color-background-surface-neutral)` | #FFFFFF   |
| color/border/NEUTRAL/pale        | Semantic   | `var(--dds-color-border-neutral-pale)`        | #C5D4E3   |
| notification/header-gap          | Component  | `var(--dds-notification-header-gap)`          | -         |
| spacing/sm                       | Semantic   | `var(--dds-spacing-sm)`                       | -         |
| notification/icon/height         | Internal   | `var(--dds-notification-icon-height)`         | -         |
| icon/size/sm                     | Component  | `var(--dds-icon-size-sm)`                     | -         |
| color/text/primary               | Semantic   | `var(--dds-color-text-primary)`               | #1D2C3B   |
| button/size/sm                   | Component  | `var(--dds-button-size-sm)`                   | -         |
| button/background/ghost-rest     | Component  | `var(--dds-button-background-ghost-rest)`     | #40586D00 |
| color/text/NEUTRAL/rest          | Semantic   | `var(--dds-color-text-neutral-rest)`          | #1D2C3B   |
| color/text/secondary             | Semantic   | `var(--dds-color-text-secondary)`             | #293B4D   |
| color/text/tertiary              | Semantic   | `var(--dds-color-text-tertiary)`              | #5C6E7E   |
| button/gap/sm                    | Component  | `var(--dds-button-gap-sm)`                    | -         |
| button/padding-horizontal/sm     | Component  | `var(--dds-button-padding-horizontal-sm)`     | -         |
| color/border/NEUTRAL/base        | Semantic   | `var(--dds-color-border-neutral-base)`        | #1D2C3B   |
| color/background/BRAND/base-rest | Semantic   | `var(--dds-color-background-brand-base-rest)` | #0672CB   |
| color/text/neutral               | Semantic   | `var(--dds-color-text-neutral)`               | #FFFFFF   |


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

OVerlay

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

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

