A modal dialog component built on the native <dialog> element.
The dialog traps focus while open and blocks interaction with the rest of the page (modal semantics). It supports animated open/close transitions, an optional backdrop overlay, and multiple content areas through named slots.
The component integrates with the
Invoker Commands API:
an Ignite button or a native <button> with command="--show" / "--hide" / "--toggle"
and commandfor pointing to this element will call the corresponding method
declaratively without any JavaScript.
- Slots
-
default— General-purpose content area. Also the target for any `<form method="dialog">` placed inside the dialog. -
title— Content rendered in the dialog header. Falls back to the `title` attribute when empty. -
message— A dedicated message/body area rendered above the default slot. Hidden when no content is assigned. -
footer— Content rendered in the dialog footer. When empty, a default "OK" close button is shown (unless `hide-default-action` is set).
- CSS Parts
-
base— The native `<dialog>` element. -
title— The `<header>` element wrapping the title slot. -
content— The `<section>` element wrapping the message and default slots. -
footer— The `<footer>` element wrapping the footer slot. -
backdrop— The decorative backdrop overlay element. -
animating— Applied to the backdrop while an animation is running.
Properties
Section titled "Properties"closeOnOutsideClick
Section titled "closeOnOutsideClick"When set, clicking on the backdrop area outside the dialog surface will close it (emitting close events).
Has no effect when the dialog is not yet open.
closeOnOutsideClick: booleanhideDefaultAction
Section titled "hideDefaultAction"When set, the built-in "OK" close button in the footer is not rendered.
Has no effect when content is projected into the footer slot, since
the slot content replaces the default button entirely.
hideDefaultAction: booleankeepOpenOnEscape
Section titled "keepOpenOnEscape"When set, pressing the Escape key will not close the dialog.
By default the browser closes a modal dialog on Escape. Enable this
option when the dialog guards unsaved work and should require an explicit
user action to dismiss.
keepOpenOnEscape: booleanWhether the dialog is open.
Setting this property programmatically will open or close the dialog
without animation and without emitting close events.
Prefer the show(), hide(), and toggle() methods for animated
transitions.
open: booleanreturnValue
Section titled "returnValue"The return value of the dialog.
Automatically set to the value of the submitter element when a
<form method="dialog"> inside the dialog is submitted. Can also
be set programmatically before calling hide().
returnValue: string | undefinedtitle
Section titled "title"The title displayed in the dialog header.
Overridden by any content projected into the title slot.
title: stringMethods
Section titled "Methods"Closes the dialog with an animated fade-out transition.
Returns true when the dialog was successfully closed, or false if
it was already closed.
hide(): Promise<boolean>Returns Promise<boolean>
Opens the dialog with an animated fade-in transition.
Returns true when the dialog was successfully opened, or false if
it was already open.
show(): Promise<boolean>Returns Promise<boolean>
toggle
Section titled "toggle"Toggles the dialog open or closed depending on its current state.
Equivalent to calling show() when closed and hide() when open.
Returns true when the transition completed successfully.
toggle(): Promise<boolean>Returns Promise<boolean>
Events
Section titled "Events"onClosed
Section titled "onClosed"Emitted after the dialog has fully closed and its exit animation has completed.
onClosed(args: CustomEvent<void>): voidParameters
- args:
CustomEvent<void>
Returns void
onClosing
Section titled "onClosing"Emitted just before the dialog closes. Cancelable — call
onClosing(args: CustomEvent<void>): voidParameters
- args:
CustomEvent<void>