Components
Backdrop
A dimmed layer that covers the page.
Backdrop dims the page behind a layer. Dialog uses it for its overlay. Use it alone for a loading overlay.
import Backdrop from '@hone-ui/react/Backdrop';Examples
A backdrop covers the whole window by default. This one sits inside a box instead, so the page stays usable:
<Box sx={{ position: 'relative', width: 240, height: 96, overflow: 'hidden' }}>
<Typography sx={{ p: 2 }}>Content behind the backdrop</Typography>
<Backdrop open sx={{ position: 'absolute', color: '#fff' }}>
Loading
</Backdrop>
</Box>The usual page-wide loading overlay:
<Backdrop open={loading} sx={{ color: '#fff', zIndex: 1301 }}>
<Spinner />
</Backdrop>
<Backdrop open invisible />An invisible backdrop is transparent but still blocks pointer events while open.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | required | A closed backdrop fades out and is hidden. |
onClose | (event, 'escapeKeyDown') => void | Called on Escape while open. | |
invisible | boolean | false | Makes the layer transparent. |
transitionDuration | number, or { appear?, enter?, exit? } in ms | 225 open, 195 close in Material | Fade length. Reduced motion removes the fade. |
sx, className, style, ref, children | Standard. |
Every HTML prop of a div passes through.
Notes
- No
TransitionComponent,componentorslots. - Backdrop reads
components.Backdrop.defaultPropsfrom the theme.
Accessibility
The root is aria-hidden, so put nothing in it that a screen reader must reach. For a loading
overlay, announce progress in a live region elsewhere.