Logo

AueraUI

Docs

Components

Components

Backdrop

A dimmed background that focuses attention on a specific task or piece of content.

Logo

Example

The demo below shows a basic Backdrop with a OTP Input. After clicking Show Backdrop, you can click anywhere on the page to close it.

API Reference

See the comprehensive guide below for a complete reference to all of the props available to the components.

open*

Type:

boolean

Determines whether the backdrop is visible or hidden

Default:

false
onClose*

Type:

function

Function triggered when backdrop is clicked or dismissed

Default:

children

Type:

ReactNode

The content to be displayed within the backdrop

Default:

className

Type:

string

Allows you to apply a custom CSS class to the Backdrop. Use this prop to add additional styling or override default styles.

Default:

mode

Type:

"light" | "dark"

Sets the theme mode for the backdrop component.

Default:

system
intensity

Type:

"none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"

Controls the intensity of the drop component backdrop.

Default:

sm
zIndex

Type:

"80" | "100" | "150" | "200" | "250" | "300" | "350" | "400" | "450" | "500" | "550" | "600" | "650" | "700" | "750" | "800" | "850" | "900" | "950" | "1000"

Controls visibility order

Default:

500
centerContent

Type:

boolean

Centers the content within the backdrop

Default:

false
preventClose

Type:

boolean

Prevents the backdrop component from closing when clicked outside

Default:

false