Close full mode

Introduction to Backdrop component in Material-UI React

Backdrop component of Material-UI:

Backdrop is used to show a dimmed layout over the current window. We can use this to show a loader, dialog etc.

YouTube Video:

I have published on video on YouTube, you can watch it here:

Simple example on Backdrop:

Let's take a look at the below example:

import { Button, Backdrop, CircularProgress } from "@material-ui/core";
import { useState } from "react";
function App() {
const [open, setOpen] = useState(false);
return (
<Button onClick={() => setOpen(true)}>Click me</Button>
<Backdrop open={open} onClick={() => setOpen(false)}>
<CircularProgress />
export default App;

If you run this app, it will show one Button. On clicking the button, it will show one Backdrop with a CircularProgress in it. If you click on the layout, it will hide that.

Material-UI Backdrop
Material-UI Backdrop

Subscribe to our Newsletter

How to create a Popover in Material-UI React
How to use Stepper component in Material-UI React