Skip to content

Backdrop

A backdrop is a semi-transparent overlay that dims the content behind a modal or popover, focusing user attention on the overlaid content.

Ready to use

Design Develop Accessibility

A backdrop is a layered interface element that appears above the main content to provide contextual information or interaction. It temporarily interrupts the user flow to deliver focused content such as dialogs, tooltips, or menus, and acts as the visual layer that supports focus trapping and content containers above it. The component is fully responsive and intentionally designed to be used across all viewports — mobile, tablet and desktop — with no alternative versions required.

Anatomy

Section titled “Anatomy”
  1. Overlay surface
  2. Underlying page
  3. Foreground container

When to use it

Section titled “When to use it”

Use the backdrop when:

  • A critical decision interrupts the user’s flow (confirmations, authentications).
  • Contextual actions like menus or dropdowns need focus isolation.
  • A focused task — a side panel for editing or a form — needs to keep the user’s attention.
  • You want to avoid taking the user out of their navigation flow, allowing alternative flows such as inline editing or quick previews.

Avoid the backdrop when:

  • The message is passive information such as a tooltip.
  • An inline alternative would fit the page just as well.
  • Backdrops would start to stack or overlap one another.
  • Adding the layer would compromise accessibility — for example by trapping focus or blocking keyboard navigation.

Properties

Section titled “Properties”

Shape

The backdrop adapts to the screen in a full-size form, covering the underlying surface so the foreground layer reads as the only interactive region.

Color

The fill remains at 55–65% opacity and resolves through the surface dim tokens, so brand consistency holds in both light and dark themes without manual editing.

Interaction

The backdrop itself isn’t focusable and contains no interactive elements — those live in the modal, drawer, or tooltip layered above. It’s marked aria-hidden="true" so assistive tech ignores it.

Platform considerations

Section titled “Platform considerations”

Desktop

The backdrop covers the full viewport and isolates focus to the foreground layer. Keep the dimming consistent so the visual hierarchy between the page and the overlay stays clear.

Tablet

Same coverage as desktop. Ensure the foreground container stays large enough that touch targets within it remain comfortable.

Mobile

On mobile the foreground layer often promotes to a bottom sheet. The backdrop still covers everything outside that sheet so the user’s focus remains on the active task.

Best practices

Section titled “Best practices”

Treat the backdrop as a focus-management tool, not just decoration.

Do

Use the backdrop to interrupt the flow for critical tasks (confirmations, authentication, blocking actions), trap focus within the layered foreground and return focus to the trigger on close, and keep the dimming consistent with the surface tokens so contrast stays predictable.

Don't

Don’t use a backdrop for passive information or low-urgency alerts (a toast or inline hint fits better), don’t stack multiple backdrops at once (progressive disclosure handles that better), and don’t lean on it as a container for full pages or persistent UI.

Content guidelines

Section titled “Content guidelines”

The backdrop carries no copy of its own — content lives in the layered surface above it. Make sure that surface speaks to the task it’s interrupting: a confirmation dialog needs a clear title and action verbs; a side panel needs the same labels and helper text it would use inline.