Skip to content

[docs][Backdrop] Move Backdrop to Utils and clarify it is a low-level utility #49072

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
webernir wants to merge 2 commits into
base: master
Choose a base branch
from
+8 −5
Open

[docs][Backdrop] Move Backdrop to Utils and clarify it is a low-level utility #49072

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9a3f815
[docs][Backdrop] Move Backdrop from Feedback to Utils in the docs nav
webernir Aug 31, 2026
338101b
[docs][Backdrop] Clarify Backdrop is a low-level utility used via Dia…
webernir Aug 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions docs/data/material/components/backdrop/backdrop.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,21 @@ 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>
<p class="description">The Backdrop component is a low-level utility that adds a dimmed layer over the application.</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.
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).

{{"component": "@mui/internal-core-docs/ComponentLinkHeader"}}

## Example

The demo below shows a basic Backdrop with a Circular Progress component in the foreground to indicate a loading state.
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.

{{"demo": "SimpleBackdrop.js"}}

## Transitions
Expand Down
2 changes: 1 addition & 1 deletion docs/data/material/pages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,6 @@ const pages: MuiPage[] = [
subheader: 'feedback',
children: [
{ pathname: '/material-ui/react-alert' },
{ pathname: '/material-ui/react-backdrop' },
{ pathname: '/material-ui/react-dialog' },
{ pathname: '/material-ui/react-progress' },
{ pathname: '/material-ui/react-skeleton' },
Expand Down Expand Up @@ -130,6 +129,7 @@ const pages: MuiPage[] = [
title: 'InitColorSchemeScript',
},
{ pathname: '/material-ui/react-modal' },
{ pathname: '/material-ui/react-backdrop' },
{ pathname: '/material-ui/react-no-ssr', title: 'No SSR' },
{ pathname: '/material-ui/react-popover' },
{ pathname: '/material-ui/react-popper' },
Expand Down
Loading