Backdrop

The Backdrop component is a low-level utility that adds a dimmed layer over the application.

Backdrop is normally used through higher-level components such as Dialog and Modal, which already include it and handle focus and assistive technology.

Most apps should not use Backdrop directly. Reach for it only when you need a custom overlay (for example a full-screen loader you fully control).

Example

The demo below is a low-level example: a basic Backdrop with a Circular Progress component in the foreground to indicate a loading state. After clicking Show Backdrop, you can click anywhere on the page to close it.

For loading and overlay UI that must communicate state to assistive technology, prefer Dialog or Modal, which already manage the backdrop.

Edit code

<Button onClick={handleOpen}>Show backdrop</Button>
<Backdrop
  sx={(theme) => ({ color: '#fff', zIndex: theme.zIndex.drawer + 1 })}
  open={open}
  onClick={handleClose}
>
  <CircularProgress color="inherit" />
</Backdrop>

<Button onClick={handleOpen}>Show backdrop</Button>
<Backdrop
  sx={(theme) => ({ color: '#fff', zIndex: theme.zIndex.drawer + 1 })}
  open={open}
  onClick={handleClose}
>
  <CircularProgress color="inherit" />
</Backdrop>

Press Enter to start editing

Transitions

Backdrop uses Fade by default. Use slots.transition and slotProps.transition to replace it with another transition or to pass transition props.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

<Backdrop />