Backdrop

Semi-transparent overlay that blocks interaction with background content. Used under modals and drawers.

import{ Backdrop } from "@pepulux/ui"

Default

Props

Prop	Type	Default	Description
open*	boolean	—	Controls visibility
onClick	() => void	—	Called when backdrop is clicked
invisible	boolean	false	Transparent backdrop (no dim)
children	ReactNode	—	Content centered over the backdrop

Application component → Modalswww.pepulux.com

Notes and documentation

Space for notes, documentation, and best practices for using these components.

Focus attention on one layer

A backdrop dims the page behind a modal, drawer or command menu so the active layer is clear. Use it only with content that needs a decision or focused input.

Clicking the backdrop should dismiss the layer unless losing the input would be destructive.

PreviousVideo Player

NextCommand Menu