Components
Backdrop
Dimmed full-screen overlay behind modal content, with an optional blur.
Backdrop is the dimming layer that sits behind dialogs and custom overlays. It
is a fixed, full-screen, aria-hidden div that renders only while open is
true; set blur to frost the content behind it. Built-in overlays like Modal
already include one — reach for Backdrop directly when composing your own
overlay. It forwards onClick and other div props so you can dismiss on click.
Example
Preview
Backdrop layer
import { Backdrop } from '@officina/ui';
<Backdrop open={isOpen} blur onClick={() => setOpen(false)} />;API
| Prop | Type | Default | Description |
|---|---|---|---|
| blur | boolean | — | Apply a backdrop blur to content behind the overlay. |
| open | boolean | true | Whether the backdrop is shown. |