Backdrop
The Backdrop component narrows the user's focus to a particular element on the screen.
The Backdrop signals a state change within the application and can be used for creating loaders, dialogs, and more. In its simplest form, the Backdrop component will add a dimmed layer over your application.
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.
<Button onClick={handleOpen}>Show backdrop</Button> <Backdrop sx={(theme) => ({ color: '#fff', zIndex: theme.zIndex.drawer + 1 })} open={open} onClick={handleClose} > <CircularProgress color="inherit" /> </Backdrop>
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.