# Backdrop

Source: https://design.ritchiebros.com/components/feedback/backdrop/

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.

## Related components

- [Progress](https://design.ritchiebros.com/components/feedback/progress/)
- [Modal](https://design.ritchiebros.com/components/utils/modal/)
- [Dialog](https://design.ritchiebros.com/components/feedback/dialog/)