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.
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.
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.
Whether 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.
OptionalreturnThe 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().
The title displayed in the dialog header.
Overridden by any content projected into the title slot.
Static ReadonlytagThe tagName read-only property of the Element interface returns the tag name of the element on which it's called.
Closes the dialog with an animated fade-out transition.
Returns true when the dialog was successfully closed, or false if
it was already closed.
Opens the dialog with an animated fade-in transition.
Returns true when the dialog was successfully opened, or false if
it was already open.
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.
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>withcommand="--show"/"--hide"/"--toggle"andcommandforpointing to this element will call the corresponding method declaratively without any JavaScript.Element
igc-dialog
Fires
igcClosing - Emitted just before the dialog closes. Cancelable — call
event.preventDefault()to abort the closing sequence.Fires
igcClosed - Emitted after the dialog has fully closed and its exit animation has completed.
Slot
<form method="dialog">placed inside the dialog.Slot
title - Content rendered in the dialog header. Falls back to the
titleattribute when empty.Slot
message - A dedicated message/body area rendered above the default slot. Hidden when no content is assigned.
Slot
footer - Content rendered in the dialog footer. When empty, a default "OK" close button is shown (unless
hide-default-actionis set).Csspart
base - The native
<dialog>element.Csspart
title - The
<header>element wrapping the title slot.Csspart
content - The
<section>element wrapping the message and default slots.Csspart
footer - The
<footer>element wrapping the footer slot.Csspart
backdrop - The decorative backdrop overlay element.
Csspart
animating - Applied to the backdrop while an animation is running.