Feedback
Backdrop
Backdrop is the dimming layer placed behind a modal, drawer or other overlay to separate it from the page beneath. It offers opacity levels with optional blur for desktop and mobile.
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features4 checks
- Backdrop traps focus within the foreground content when open
- Uses aria-modal="true" on the container to indicate modal behavior
- Background content receives aria-hidden="true" when backdrop is active
- Escape key closes the backdrop (delegated to parent modal/dialog)
When to use this component
✓Do's
- •Displaying modals, dialogs, or drawers that need focus isolation
- •Preventing user interaction with background content
- •Creating visual hierarchy between layers
✗Don'ts
- •When users need to continue interacting with the page, use a non-modal panel.
- •For messages that don't require focus, use inline notifications or alerts.
- •For loading states, use a Spinner or Skeleton instead.
Do's and Don'ts
✓ Do's
Allow users to dismiss the backdrop by clicking on it or pressing Escape.
✗ Don'ts
Don't use a fully opaque backdrop that hides all context, users lose orientation.