Overlay

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

Status

Figma UI Kit	PublishedElement can be used in production
Vanilla	PublishedElement can be used in production
Angular	In backlogElement is in backlog
React	In backlogElement is in backlog
Documentation	In progressElement design and development in progress

What's new

Overlay is a new standalone component for Dell Design System v2. The overlay component is always used with other components, such as modal and drawer.

Usage

Pair the overlay component with another component to create focus.

Kinds

An overlay blocks out page content to keep the user focused on a single task.

Overlay

Blurred overlay

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 non blurred default state.

A darkened overlay with blur effect over a content page. — An overlay covers the visible page with a blurred layer.

Sizes

An overlay should cover the entire viewable page behind the focused content.

Live demo

This demo lets you interact with the component and view the code. To see other interactive examples of this component or for additional developer documentation, visit Storybook.

You are now entering a live demo of the component.

<div class="dds__overlay" aria-hidden="true"></div>

Copy code

View the overlay demo and code in Vanilla.

Visit Storybook

Overlay

Status

Contents

What's new

Contents

Contents

Usage

Kinds

Overlay

Blurred overlay

Sizes

Contents

Contents

Live demo

You are now entering a live demo of the component.

Vanilla

Contents

Overlay

Status

Contents

What's newCopy link to this section

Contents

What's new