Components

Backdrop

Overlays a semi-transparent layer behind modals, drawers, and popups. Manages scroll lock and click-outside-to-close.

import{ Backdrop }from"oks-ui"

Click outsideEscape keyScroll lockBlur effectAnimation types

Basic

Backdrop is controlled via isOpen and onClose props.

Interactive Playground

Controls

closeOnOutsideClick

closeOnEscape

lockScroll

animationType

Preview

Generated Code

const [isOpen, setIsOpen] = useState(false);

<Button onPress={() => setIsOpen(true)}>Open Backdrop</Button>
<Backdrop isOpen={isOpen} onClose={() => setIsOpen(false)}>
  <div>Content above the backdrop.</div>
</Backdrop>

Props

Prop	Type	Default	Description
isOpen	boolean	—	Controls visibility (required).
onClose	() => void	—	Called when backdrop is dismissed (required).
closeOnOutsideClick	boolean	true	Close when clicking outside content.
closeOnEscape	boolean	true	Close on Escape key press.
lockScroll	boolean	true	Lock body scroll when open.
blur	boolean \| 'sm' \| 'md' \| 'lg' \| number	false	Backdrop blur intensity.
animationType	"fade" \| "zoom" \| "slideUp" \| "slideDown" \| "slideLeft" \| "slideRight"	"fade"	Animation style.
zIndex	number	—	Custom z-index.
portal	boolean	true	Render in a portal.

isOpen—

boolean

Controls visibility (required).

onClose—

() => void

Called when backdrop is dismissed (required).

closeOnOutsideClicktrue

boolean

Close when clicking outside content.

closeOnEscapetrue

boolean

Close on Escape key press.

lockScrolltrue

boolean

Lock body scroll when open.

blurfalse

boolean | 'sm' | 'md' | 'lg' | number

Backdrop blur intensity.

animationType"fade"

Animation style.

zIndex—

number

Custom z-index.

portaltrue

boolean

Render in a portal.