A backdrop narrows a person’s focus to a particular element on the screen by dimming everything behind it — often shown while a blocking operation is in progress.
Figma
The Figma reference for Backdrop will appear here once the design link is added.
Storybook
Interactive examples for Backdrop will render here once the Storybook link is wired in.
Best practices
- Use a backdrop to signal that the interface is temporarily blocked, usually alongside a spinner.
- Keep backdrops brief; a long-lived backdrop makes the app feel frozen.
- Pair the backdrop with a clear indication of what’s happening and, where possible, a way to cancel.
Do’s and don’ts
Do
Show a backdrop during a short, blocking wait with a progress indicator on top.
Don’t
Leave a backdrop up with no feedback about progress or how to dismiss it.
Accessibility
- While the backdrop is active, keep focus within the foreground content and restore it when dismissed.