Dialog

ic.Dialog is a modal overlay that dims the background and presents a focused panel with a title, body content, and action buttons. It is designed for confirmations, forms, or any interaction that needs the user’s full attention before they can return to the rest of the interface.

Title, buttons, and closing behavior

Title sets the heading text in the dialog header. The default footer shows Submit and Cancel buttons whose labels you can customize with SubmitLabel and CancelLabel, and setting either to an empty string hides that button. Closable controls whether the X button and Escape key are available, and CloseOnBackdropClick determines whether clicking the dimmed backdrop dismisses the dialog. If you need a forced confirmation where the user must explicitly choose an action, set both to false.

You can also toggle a dialog programmatically with open() and close(), or set the Open property directly. For the common case where another component should open or act on the dialog, there are three convenience methods: bindOpen wires a click on any component to open the dialog, bindSubmit wires a click to trigger the submit action (fires Submitted and closes), and bindClose wires a click to dismiss it (fires Closed and closes). All three accept an optional second argument for the DOM event name (defaults to "click"). In this example the default footer buttons are hidden, and two buttons in the dialog body take their place.

Custom footer

By default the dialog renders Submit and Cancel buttons in the footer. If you add child components to the "footer" target, they replace the default buttons entirely, giving you full control over what actions the dialog offers. Set SubmitLabel and CancelLabel to "" to hide the defaults, then use bindSubmit and bindClose on your custom buttons to keep the same event flow.

Events

Dialog fires Submitted when the user clicks the submit button and Closed when the dialog is dismissed by any other means (cancel button, X button, Escape key, or backdrop click). In MATLAB, the DestroyOnClose property (set at construction, defaults to true) automatically deletes the dialog after either event fires, so you do not need to manage its lifecycle manually.

Custom styling

The dialog’s DOM is broken into several BEM blocks you can target individually: .ic-dialog__content for the outer panel, .ic-dialog__header for the top bar, .ic-dialog__title for the heading text, .ic-dialog__body for the scrollable content area, .ic-dialog__footer for the button row, and .ic-dialog__btn--submit / .ic-dialog__btn--cancel for the default buttons.

dlg = ic.Dialog("Title", "Custom Dialog");

dlg.css.style(".ic-dialog__content", ...
    "border", "2px solid #6366f1", ...
    "border_radius", "6px", ...
    "box_shadow", "0 12px 40px rgba(99, 102, 241, 0.3)");

dlg.css.style(".ic-dialog__header", ...
    "background", "linear-gradient(135deg, #6366f1, #8b5cf6)", ...
    "color", "#fff");

dlg.css.style(".ic-dialog__title", ...
    "color", "#fff");

dlg.css.style(".ic-dialog__btn--submit", ...
    "background", "#6366f1", ...
    "border_color", "transparent");