005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
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"}}
|