24 lines
798 B
Markdown
24 lines
798 B
Markdown
|
---
|
||
|
|
productId: material-ui
|
||
|
|
title: Backdrop React Component
|
||
|
|
components: Backdrop
|
||
|
|
githubLabel: 'scope: backdrop'
|
||
|
|
githubSource: packages/mui-material/src/Backdrop
|
||
|
|
---
|
||
|
|
|
||
|
|
# Backdrop
|
||
|
|
|
||
|
|
<p class="description">The Backdrop component narrows the user's focus to a particular element on the screen.</p>
|
||
|
|
|
||
|
|
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.
|
||
|
|
|
||
|
|
{{"component": "@mui/docs/ComponentLinkHeader"}}
|
||
|
|
|
||
|
|
## 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.
|
||
|
|
|
||
|
|
{{"demo": "SimpleBackdrop.js"}}
|