UI ComponentsOverlays
Backdrop
A dismissible background layer for custom overlays.
Import
import { Backdrop } from "@puzzle-ui/ui";Controlled visibility
Backdrop requests dismissal; your state must close it. Prefer Dialog or Drawer when their built-in semantics fit.
API
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | "div" | Root element. |
open | boolean | true | Visibility. |
modal | boolean | false | Modal overlay management and scroll locking. |
closeOnBackdrop | boolean | true | Request dismissal on a direct background click. |
closeOnEscape | boolean | true | Request dismissal with Escape. |
onClose | () => void | - | Dismissal request. |
children | ReactNode | - | Overlay content. |
Native props are forwarded. Only the top overlay handles dismissal. For custom modal content, provide an accessible dialog name/role and mark its content root with data-overlay-content; Backdrop itself does not provide dialog semantics. It does not create a portal.