Backdrop

The backdrop component is used to provide emphasis on a particular element or parts of it.

The backdrop signals to the user of 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.

Feedback
Bundle size
Figma
Adobe
Sketch

Example

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

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

Press Enter to start editing

API

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

<Backdrop />