Backdrop

In Development

This component is currently in development. The API is not yet stable and may change in future releases.

Overview

Backdrop renders a full-screen overlay behind modal content. It is used internally by Dialog, Alertdialog, Drawer, Sheet, and CmdPalette to dim or blur the page background.

Usage

HTML

<div class="pm-backdrop pm-backdrop--default pm-backdrop--visible" aria-hidden="true"></div>

React

import { Backdrop } from "@paramanu/overlays-react"

<Backdrop variant="default" visible onClick={handleClose} />

Guidelines

• Always set aria-hidden="true" since the backdrop is decorative
• Use the onClick handler to close the parent overlay
• Choose the blur variant for a frosted glass effect
• Use transparent when you need click-outside behavior without visual dimming

API

Prop	Type	Default	Description
variant	"default" | "transparent" | "blur"	"default"	Visual style of the backdrop
visible	boolean	false	Whether the backdrop is visible
onClick	() => void	-	Click handler for dismissing overlays