Backdrop

Feedback

Backdrop overlay for modals with blur effects and click-to-close functionality

Basic Usage

Real World Example

Usage Guidelines

When to Use

  • Modal overlays
  • Focus trapping visual
  • Dimming background

Accessibility

  • Traps focus appropriately
  • Escape to close

Performance

  • CSS blur
  • Native backdrop-filter

Common Mistakes

  • No click-to-close on mobile
  • Backdrop without modal content

Frequently Asked Questions

Backdrop is an overlay behind modals with blur effects and click-to-close support.
Yes, Backdrop can blur the content behind it for focus.

View on GitHub

See the full source code on GitHub

Related Components

View all
Alert

Contextual messaging with severity variants, dismissal, icons, and action button integration

Progress

Progress indicator with determinate/indeterminate modes, labels, and variant system including gradients

Result

Full-page status displays for success, error, and HTTP status codes (404, 403, 500) with action buttons

Snackbar

Material-style snackbar notifications with auto-dismiss, action buttons, and positioning

Previous

Typography

Next

Snackbar