Explorer

Alert Dialog

Accessible alert dialog with focus trap, keyboard handling, and portal rendering.

Componentsdocsbase-ui/alert-dialog↗

Installation

pnpm dlx edbn-ui@latest add alert-dialog

Manual

Create a file and paste the following code into it.

API Reference

Root

Groups all parts of the alert dialog. Always modal and requires an explicit user response.

defaultOpenboolean

=false

Initial open state

openboolean

Controlled open state

onOpenChange(open: boolean, eventDetails: AlertDialog.Root.ChangeEventDetails) => void

Called when the alert dialog opens or closes

onOpenChangeComplete(open: boolean) => void

Called after animation completes

actionsRefRefObject<AlertDialog.Root.Actions | null>

Imperative close and unmount actions

handleAlertDialog.Handle<Payload>

Handle for detached triggers

defaultTriggerIdstring | null

Initial associated trigger id

triggerIdstring | null

Controlled associated trigger id

childrenReactNode | PayloadChildRenderFunction<Payload>

Alert dialog content or payload-aware render child

Trigger

A button that opens the dialog. Renders a button element.

handleAlertDialog.Handle<Payload>

Associates this trigger with a detached root

payloadPayload

Payload passed to a render-child root

idstring

Element and active trigger id

nativeButtonboolean

=true

Render as native button

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Trigger data attributes
Attribute	Description
data-popup-open	Present when dialog is open
data-disabled	Present when disabled

Portal

Moves the popup to a different part of the DOM. Renders a div element.

containerHTMLElement | ShadowRoot | RefObject | null

Portal container

keepMountedboolean

=false

Keep in DOM when closed

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Backdrop

An overlay displayed beneath the popup. Renders a div element.

forceRenderboolean

=false

Force rendering even when nested

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Backdrop data attributes
Attribute	Description
data-open	Present when dialog is open
data-closed	Present when dialog is closed
data-starting-style	Present when animating in
data-ending-style	Present when animating out

Viewport

A positioning container for scrollable alert dialogs. Renders a div element.

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Viewport data attributes
Attribute	Description
data-open	Present when dialog is open
data-closed	Present when dialog is closed
data-starting-style	Present when animating in
data-ending-style	Present when animating out
data-nested	Present when nested within another dialog
data-nested-dialog-open	Present when nested dialogs are open within

Popup

A container for the dialog contents. Renders a div element.

initialFocusboolean | RefObject<HTMLElement> | function

Element to focus on open

finalFocusboolean | RefObject<HTMLElement> | function

Element to focus on close

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Popup data attributes
Attribute	Description
data-open	Present when dialog is open
data-closed	Present when dialog is closed
data-starting-style	Present when animating in
data-ending-style	Present when animating out
data-nested	Present when nested within another dialog
data-nested-dialog-open	Present when nested dialogs are open within

Popup CSS variables
Variable	Description
--nested-dialogs	Number of dialogs nested within

Title

A heading that labels the dialog. Renders an h2 element.

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Description

A paragraph with additional information about the dialog. Renders a p element.

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Close

A button that closes the dialog. Renders a button element.

nativeButtonboolean

=true

Render as native button

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Close data attributes
Attribute	Description
data-disabled	Present when disabled

Action

EDBN destructive action helper built on AlertDialog.Close. Renders a button element.

nativeButtonboolean

=true

Render as native button

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Action data attributes
Attribute	Description
data-disabled	Present when disabled

Header

EDBN layout helper for grouping AlertDialogTitle and AlertDialogDescription. Renders a div element.

classNamestring

CSS class name

Footer

EDBN layout helper for alert dialog actions. Renders a div element.

classNamestring

CSS class name

Handle

Base UI handle utility for detached triggers and imperative alert dialog control.

isOpenboolean

=readonly

Whether the associated alert dialog is open

open(triggerId: string | null) => void

=method

Open and associate the alert dialog with a trigger id

openWithPayload(payload: Payload) => void

=method

Open with payload for render-child alert dialog roots

close() => void

=method

Close the associated alert dialog

createHandle

Function exported as createAlertDialogHandle for creating typed detached-trigger handles.

returnAlertDialog.Handle<Payload>

A new imperative alert dialog handle

edbn/ui

Explorer

Alert Dialog

Accessible alert dialog with focus trap, keyboard handling, and portal rendering.

Componentsdocsbase-ui/alert-dialog↗

Installation

pnpm dlx edbn-ui@latest add alert-dialog

Manual

Create a file and paste the following code into it.

API Reference

Root

Groups all parts of the alert dialog. Always modal and requires an explicit user response.

defaultOpenboolean

=false

Initial open state

openboolean

Controlled open state

onOpenChange(open: boolean, eventDetails: AlertDialog.Root.ChangeEventDetails) => void

Called when the alert dialog opens or closes

onOpenChangeComplete(open: boolean) => void

Called after animation completes

actionsRefRefObject<AlertDialog.Root.Actions | null>

Imperative close and unmount actions

handleAlertDialog.Handle<Payload>

Handle for detached triggers

defaultTriggerIdstring | null

Initial associated trigger id

triggerIdstring | null

Controlled associated trigger id

childrenReactNode | PayloadChildRenderFunction<Payload>

Alert dialog content or payload-aware render child

Trigger

A button that opens the dialog. Renders a button element.

handleAlertDialog.Handle<Payload>

Associates this trigger with a detached root

payloadPayload

Payload passed to a render-child root

idstring

Element and active trigger id

nativeButtonboolean

=true

Render as native button

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Trigger data attributes
Attribute	Description
data-popup-open	Present when dialog is open
data-disabled	Present when disabled

Portal

Moves the popup to a different part of the DOM. Renders a div element.

containerHTMLElement | ShadowRoot | RefObject | null

Portal container

keepMountedboolean

=false

Keep in DOM when closed

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Backdrop

An overlay displayed beneath the popup. Renders a div element.

forceRenderboolean

=false

Force rendering even when nested

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Backdrop data attributes
Attribute	Description
data-open	Present when dialog is open
data-closed	Present when dialog is closed
data-starting-style	Present when animating in
data-ending-style	Present when animating out

Viewport

A positioning container for scrollable alert dialogs. Renders a div element.

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Viewport data attributes
Attribute	Description
data-open	Present when dialog is open
data-closed	Present when dialog is closed
data-starting-style	Present when animating in
data-ending-style	Present when animating out
data-nested	Present when nested within another dialog
data-nested-dialog-open	Present when nested dialogs are open within

Popup

A container for the dialog contents. Renders a div element.

initialFocusboolean | RefObject<HTMLElement> | function

Element to focus on open

finalFocusboolean | RefObject<HTMLElement> | function

Element to focus on close

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Popup data attributes
Attribute	Description
data-open	Present when dialog is open
data-closed	Present when dialog is closed
data-starting-style	Present when animating in
data-ending-style	Present when animating out
data-nested	Present when nested within another dialog
data-nested-dialog-open	Present when nested dialogs are open within

Popup CSS variables
Variable	Description
--nested-dialogs	Number of dialogs nested within

Title

A heading that labels the dialog. Renders an h2 element.

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Description

A paragraph with additional information about the dialog. Renders a p element.

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Close

A button that closes the dialog. Renders a button element.

nativeButtonboolean

=true

Render as native button

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Close data attributes
Attribute	Description
data-disabled	Present when disabled

Action

EDBN destructive action helper built on AlertDialog.Close. Renders a button element.

nativeButtonboolean

=true

Render as native button

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Action data attributes
Attribute	Description
data-disabled	Present when disabled

Header

EDBN layout helper for grouping AlertDialogTitle and AlertDialogDescription. Renders a div element.

classNamestring

CSS class name

Footer

EDBN layout helper for alert dialog actions. Renders a div element.

classNamestring

CSS class name

Handle

Base UI handle utility for detached triggers and imperative alert dialog control.

isOpenboolean

=readonly

Whether the associated alert dialog is open

open(triggerId: string | null) => void

=method

Open and associate the alert dialog with a trigger id

openWithPayload(payload: Payload) => void

=method

Open with payload for render-child alert dialog roots

close() => void

=method

Close the associated alert dialog

createHandle

Function exported as createAlertDialogHandle for creating typed detached-trigger handles.

returnAlertDialog.Handle<Payload>

A new imperative alert dialog handle