All components

OVERLAYS / COMPONENTS

Backdrop

Separate a modal layer from its context.

Live component2 documented props

About backdrop

Required copy, this will always be here

01

Anatomy

Shared parts, named consistently.

  1. 1
    BackdropRequired

    The Backdrop container

Try the default

A working example with the shared V1 visual language.

Check your tokens and component states before saving this release.

When to use

Pair with a modal surface that provides keyboard dismissal and focus management. The scrim is never the only close action.

The backdrop itself is not focusable. Its foreground dialog handles Escape and an explicit close control.

Related components

Source & adaptation

V1 semantic colors, DM Sans typography, compact controls, and responsive layouts. The API table describes this implementation; source design notes may use earlier API terminology.

components/library/overlays.tsx