Backdrop

The dim layer behind overlays. Dialog, Drawer, and Tour manage their own; reach for this one only when building a custom overlay.

Example

<Backdrop id="demo-backdrop" hidden />
<script>
  document.getElementById("show-backdrop")
    .addEventListener("click", () => {
      const b = document.getElementById("demo-backdrop");
      b.hidden = false;
      setTimeout(() => { b.hidden = true; }, 1500);
    });
</script>

Props

Accessibility

• Always aria-hidden: it is scenery, never content.
• Pair it with a focus-managed panel; never use it alone to block input.