edbnedbn/ui
ComponentsMapsAudioPDF
GitHub stars
Explorer
Get Started
Components

Dialog

Modal dialog with focus trap, backdrop, and controlled state.

Componentsdocsbase-ui/dialog↗

Installation

pnpm dlx edbn-ui@latest add dialog

Manual

1

Create a file and paste the following code into it.

API Reference

Root

Groups all parts of the dialog. Doesn't render its own HTML element.

defaultOpenboolean
=false

Initial open state

openboolean

Controlled open state

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

Called when the dialog opens or closes

modalboolean | 'trap-focus'
=true

Controls focus trapping, scroll lock, and outside interaction

disablePointerDismissalboolean
=false

Disable backdrop dismiss

onOpenChangeComplete(open: boolean) => void

Called after animation completes

actionsRefRefObject<Dialog.Root.Actions | null>

Imperative close and unmount actions

handleDialog.Handle<Payload>

Handle for detached triggers

defaultTriggerIdstring | null

Initial associated trigger id

triggerIdstring | null

Controlled associated trigger id

childrenReactNode | PayloadChildRenderFunction<Payload>

Dialog content or payload-aware render child

Trigger

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

handleDialog.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
AttributeDescription
data-popup-openPresent when dialog is open
data-disabledPresent 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
AttributeDescription
data-openPresent when dialog is open
data-closedPresent when dialog is closed
data-starting-stylePresent when animating in
data-ending-stylePresent when animating out

Viewport

A positioning container for scrollable 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
AttributeDescription
data-openPresent when dialog is open
data-closedPresent when dialog is closed
data-starting-stylePresent when animating in
data-ending-stylePresent when animating out
data-nestedPresent when nested within another dialog
data-nested-dialog-openPresent 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
AttributeDescription
data-openPresent when dialog is open
data-closedPresent when dialog is closed
data-starting-stylePresent when animating in
data-ending-stylePresent when animating out
data-nestedPresent when nested within another dialog
data-nested-dialog-openPresent when nested dialogs are open within
Popup CSS variables
VariableDescription
--nested-dialogsNumber 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. 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
AttributeDescription
data-disabledPresent when disabled

CloseIconButton

EDBN styled corner close button built on Dialog.Close with an icon and accessible label.

aria-labelstring
='Close dialog'

Accessible label for the icon button

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

Header

EDBN layout helper for grouping DialogTitle and DialogDescription. Renders a div element.

classNamestring

CSS class name

Footer

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

classNamestring

CSS class name

Handle

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

isOpenboolean
=readonly

Whether the associated dialog is open

open(triggerId: string | null) => void
=method

Open and associate the dialog with a trigger id

openWithPayload(payload: Payload) => void
=method

Open with payload for render-child dialog roots

close() => void
=method

Close the associated dialog

createHandle

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

returnDialog.Handle<Payload>

A new imperative dialog handle