General
Backdrop
A backdrop component
Overview
The Backdrop component provides a semi-transparent overlay behind modals, drawers, or focused content to focus attention and separate the active layer from the rest of the page.
Key Business & UX Benefits
- Directs focus to dialogs or panels by dimming the background.
- Reduces distraction and clarifies what the user should interact with.
- Communicates a modal or overlay state in a familiar way.
- Improves perceived hierarchy and flow in complex UIs.
Pro-Tip from Larry: Use a backdrop with modals so users know the page is paused and where to look.
Usage
Backdrop
Feature List
- Semi-transparent overlay for modal and drawer contexts
- Configurable appearance to match theme
- Accessible focus and click-outside behavior
- Consistent layering with other overlay components
API Reference
| Prop | Default | Type |
|---|---|---|
containerStyle | full-width | "full-width" | "boxed" |
containerBackground | string | |
background | solid | BackdropBackground ("default" | "none" | "pale" | "solid" | string) |
backgroundBrightness | BackgroundBrightness ("dark" | "light" | "bright") | |
blockMargin | "s" | "m" | "l" | |
innerContainer | true | boolean |
innerBlockPadding | "s" | "m" | "l" | |
innerClass | any |
| Slot | Type |
|---|---|
default | any |