---
productId: material-ui
title: Backdrop React Component
components: Backdrop
githubLabel: 'scope: backdrop'
githubSource: packages/mui-material/src/Backdrop
---

# 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](/material-ui/react-dialog/) and [Modal](/material-ui/react-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.

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

export default 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>
  );
}

```

## Transitions

Backdrop uses [Fade](/material-ui/transitions/#fade) by default.
Use `slots.transition` and `slotProps.transition` to replace it with another transition or to pass transition props.


# Backdrop API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Backdrop](https://deploy-preview-49072--material-ui.netlify.app/material-ui/react-backdrop/)

## Import

```jsx
import Backdrop from '@mui/material/Backdrop';
// or
import { Backdrop } from '@mui/material';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| open | `bool` | - | Yes |  |
| children | `node` | - | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| component | `elementType` | - | No |  |
| invisible | `bool` | `false` | No |  |
| slotProps | `{ root?: func \| object, transition?: func \| object }` | `{}` | No |  |
| slots | `{ root?: elementType, transition?: elementType }` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| transitionDuration | `number \| { appear?: number, enter?: number, exit?: number }` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

> Any other props supplied will be provided to the root element ([Fade](https://deploy-preview-49072--material-ui.netlify.app/material-ui/api/fade/)).

## Inheritance

While not explicitly documented above, the props of the [Fade](https://deploy-preview-49072--material-ui.netlify.app/material-ui/api/fade/) component are also available on Backdrop.

## Theme default props

You can use `MuiBackdrop` to change the default props of this component with the theme.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| root | `'div'` | `.MuiBackdrop-root` | The component that renders the root. |
| transition | `Fade` | - | The component that renders the transition.
[Follow this guide](/material-ui/transitions/#transition-slots) to learn more about the requirements for this component. |

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | invisible | Styles applied to the root element if `invisible={true}`. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/mui-material/src/Backdrop/Backdrop.js](https://github.com/mui/material-ui/tree/HEAD/packages/mui-material/src/Backdrop/Backdrop.js)