Skip to main content

​
Backdrop

The Backdrop component narrows the user’s focus to a particular element on the screen, typically used with modals and loading states.

​
Overview

Backdrop is a simple full-screen overlay that can contain loading indicators or be used to block user interaction during asynchronous operations. It uses the Fade transition by default.

​
Basic Usage

import * as React from 'react';
import Backdrop from '@mui/material/Backdrop';
import CircularProgress from '@mui/material/CircularProgress';
import Button from '@mui/material/Button';

function SimpleBackdrop() {
  const [open, setOpen] = React.useState(false);
  
  const handleClose = () => {
    setOpen(false);
  };
  
  const handleOpen = () => {
    setOpen(true);
  };

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

​
Invisible Backdrop

The backdrop can be made invisible while still blocking user interaction: 
<Backdrop
  invisible
  open={open}
  onClick={handleClose}
>
  <CircularProgress />
</Backdrop>

​
Props

​
Main Props

PropTypeDefaultDescription
openbooleanrequiredIf true, the component is shown.
invisiblebooleanfalseIf true, the backdrop is invisible. Can be used when rendering a popover or custom select.
transitionDurationnumber | { enter?: number, exit?: number }-The duration for the transition, in milliseconds.
slots.transitionElementTypeFadeThe component used for the transition.
sxSxProps<Theme>-System prop for defining CSS overrides.

​
Inherited Props

Backdrop also accepts all props from the Fade component:
PropTypeDescription
inbooleanIf true, the component is shown (controlled by open prop).
timeoutnumber | { enter?: number, exit?: number }Transition timeout.
easingstring | { enter?: string, exit?: string }Transition easing.

​
Slot Props

The Backdrop component supports slot-based customization:
  • slots.root - The root div element
  • slots.transition - The transition component (default: Fade)
Use slotProps to pass props to each slot: 
<Backdrop
  open={open}
  slotProps={{
    root: { 
      onClick: handleClose,
      'aria-label': 'loading backdrop' 
    },
    transition: { timeout: 500 }
  }}
>
  <CircularProgress />
</Backdrop>

​
CSS Classes

The component has the following CSS classes available:
  • .MuiBackdrop-root - Root element
  • .MuiBackdrop-invisible - Applied when invisible={true}

​
Z-Index

Backdrop uses a z-index to position itself above other content. The default z-index can be accessed via: 
theme.zIndex.modal // 1300
You can customize the z-index using the sx prop: 
<Backdrop
  sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
  open={open}
>
  {/* content */}
</Backdrop>

​
Inheritance

Backdrop inherits from the Fade component.

​
API Reference

For complete API documentation, see:

​
Source Location

~/workspace/source/packages/mui-material/src/Backdrop/Backdrop.d.ts:141

Build docs developers (and LLMs) love

Get started for freeTalk to us