Examples
Basic
Click the button to show the backdrop, then click the backdrop to dismiss. Alpine's x-show handles mount; the backdrop itself just renders the overlay surface.
Click the button to show the overlay. Click the backdrop to dismiss. Alpine's
x-show handles the mount; the backdrop element handles the visual.
With content
Pass overlay content (spinner, dialog body, custom panel) into the backdrop's content slot. @click.stop on the inner panel prevents the dismiss bubble.
Pass content into the backdrop's slot. @click.stop on the inner panel prevents clicks
on the content from bubbling up and dismissing the backdrop.
Non-dismissible
Omit the dismiss handler on the wrapper. Only the explicit close button calls open = false. Use when the user must complete or cancel an action deliberately.
Omit the dismiss handler on the wrapper. Only the explicit close button calls
open = false. Use for actions the user must complete or cancel deliberately.
Documentation
Backdrop props
Parameters accepted by
{#include components/feedback/backdrop ... /}.
| Name | Type | Default | Description |
|---|---|---|---|
* id
|
String | — |
DOM id on the overlay <div>. Used by Alpine / e2e selectors to drive
show/hide.
|
overlay (slot)
|
Qute insert | — |
Optional overlay content rendered inside the backdrop. Use for spinners, dialog bodies, or any panel that
should sit on top of the gray-out. Add @click.stop on the inner panel so clicks
on the content don't bubble up and dismiss. The slot is named overlay (not
content) to avoid colliding with the demo's example-card content slot when this
template renders inside a demo card.
|
Divergence from PF docs: PF v6 docs only show a single "Basic" example because the
component is meant to be composed with Modal / Popover (which have their own pages). We ship three concrete patterns
(basic dismiss, with overlay content, non-dismissible) since this project doesn't always pair backdrop with a modal
— sometimes it's just a loading overlay. className is React-specific; skipped.
Usage
Drive visibility from the consumer. The backdrop component is a static
<div>; show / hide is the caller's job. The examples use Alpine's
x-show with a boolean — substitute HTMX's hx-target /
hx-swap if the open state is server-driven.
Dismiss handler placement. Attach the dismiss to the wrapper around the backdrop (not the backdrop
element itself) so the click hits the outer "overlay" region. Add @click.stop on any
inner panel that should NOT dismiss.
z-index. PF v6's CSS sets the backdrop's z-index via the
--pf-t--global--z-index--lg token. Inner content automatically stacks above; if you
nest the backdrop inside another stacking context, the global token still wins.
Focus management. The backdrop component doesn't trap focus on its own. Pair with the project's
focus-trap.js utility (or a modal / popover component that handles it) when the overlay
carries interactive content.