🚀 Material UI and MUI X v9 are out! Check out the announcement blogpost.

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).

Example

The demo below shows 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.

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 />