Backdrop

Default

Click outside the panel or press Escape to dismiss.

<Backdrop open={open} onClose={() => setOpen(false)}>
<MyPanel />
</Backdrop>

Allow click-through

allowClickThrough

The scrim ignores pointer input so clicks reach content behind it — children stay clickable.

<Backdrop open={open} onClose={() => setOpen(false)} allowClickThrough>
<MyPanel />
</Backdrop>

Blur

blur

Applies a backdrop blur alongside the existing dim scrim.

<Backdrop open={open} onClose={() => setOpen(false)} blur>
<MyPanel />
</Backdrop>

When to use

Use Backdrop when building a new overlay-style component (a drawer, a custom panel) that needs the same portal-mount + dim-scrim + dismiss mechanics Modal/BottomSheet already use. Most product code should reach for Modal or BottomSheet directly rather than composing Backdrop itself.

When not to use

Building a standard modal, confirmation dialog, or bottom sheet: use Modal/BottomSheet — they already compose Backdrop with the right panel styling and animation.
A non-blocking overlay that should never dismiss: consider whether allowClickThrough plus omitting a close affordance is really the right pattern, or whether the content simply shouldn’t be an overlay at all.

Props

Prop	Type	Default	Description
open	boolean	-	Controlled; no internal open state.
onClose	() => void	-	Fires on backdrop click (unless allowClickThrough) and on Escape/Android back.
allowClickThrough	boolean	false	When true, the scrim ignores pointer input so clicks/taps reach content behind it. Children stay clickable; Escape/back-button dismissal is unaffected.
blur	boolean	false	When true, applies a 2px backdrop blur behind the scrim, additive to the dim colour rather than a replacement for it.
contentPosition	'center' \| 'end'	'center'	Native only. Vertical placement of children — 'end' anchors to the bottom edge (used by BottomSheet). Web has no equivalent prop; a web consumer positions its own panel wrapper directly with CSS instead.

Import

Web

import { Backdrop } from '@checkatrade/components-web';

Native

import { Backdrop, BACKDROP_PORTAL_HOST } from '@checkatrade/components-native';

Basic usage

const [open, setOpen] = useState(false);
<Backdrop open={open} onClose={() => setOpen(false)}>
  <MyPanel />
</Backdrop>;

Native only: the consumer app must render <PortalProvider> wrapping <PortalHost name={BACKDROP_PORTAL_HOST} /> near its root — see apps/storybook-native/App.tsx for the reference setup.

Platform status

Platform / Area	Status
Design (Figma)	Beta
Web (React)	Beta
Native (React Native)	Beta
iOS (Swift)	Planned
Android (Kotlin)	Planned
Accessibility audit	Planned

Accessibility

Escape-key dismissal (web + native-on-web) and Android hardware-back dismissal (native).
Backdrop carries no role/aria-* of its own — the modal-dialog semantics (role="dialog", accessibilityViewIsModal) live on the panel content rendered inside it (see Modal/BottomSheet).

No releases yet.