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.
- Element
-
igc-dialog
- 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: boolean = falseDefined in src/components/dialog/dialog.ts:148
hideDefaultAction
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: boolean = falseDefined in src/components/dialog/dialog.ts:159
keepOpenOnEscape
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: boolean = falseDefined in src/components/dialog/dialog.ts:137
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.
open: boolean = falseDefined in src/components/dialog/dialog.ts:172
Optional returnValue
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: stringDefined in src/components/dialog/dialog.ts:191
title
Section titled "title"The title displayed in the dialog header.
Overridden by any content projected into the title slot.
title: stringDefined in src/components/dialog/dialog.ts:181
tagName
Section titled "tagName"The tagName read-only property of the Element interface returns the tag name of the element on which it's called.
tagName: "igc-dialog" = 'igc-dialog'Defined in src/components/dialog/dialog.ts:71
Methods
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 or the transition was superseded by a newer one.
hide(): Promise<boolean>Defined in src/components/dialog/dialog.ts:286
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 or the transition was superseded by a newer one.
show(): Promise<boolean>Defined in src/components/dialog/dialog.ts:276
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>Defined in src/components/dialog/dialog.ts:296