Dialog

A dialog is a modal window with a title and a content. It does not open by itself: a button with a dialog action opens it, and a button with a close action inside it closes it. The playground has both buttons and runs those actions, so press Open the dialog, change its attributes and open it again. The XML below shows the dialog and the button that opens it.

Live preview

LightDark

Controls

Title

Width

DefaultSmallMediumLarge

Footer with a button

XML

<dialog id="demo" label="Edit customer">
  <tag type="div"
       style="modal-body"
       label="Update the data of the customer and save the changes." />
  <tag type="div" style="modal-footer">
    <button id="Close" label="Close" style="btn-primary">
      <button-action type="close" target="demo" />
    </button>
  </tag>
</dialog>
<button id="Open" label="Open the dialog">
  <button-action type="dialog" target="demo" />
</button>

Attributes

The controls above write these attributes. The reference lists every attribute, its type and default. Attributes in the XSD reference

Attribute	Control	Values
label	Title	text
style	Width	modal-smmodal-mdmodal-lg
tag	Footer with a button	true / false

Events and actions

Event	Description
open	Stored in the dialog when it is opened.
close	Stored in the dialog when it is closed.

Action (type)	What it does
dialog	Opens the dialog named in target.
close	Closes the dialog and goes on with the actions that were waiting.
close-cancel	Closes the dialog and cancels the actions that were waiting.

Full reference

• Full documentation of this component
• XSD reference of the element

note

A dialog is drawn over the whole page, outside the preview, so the overlay follows the colour mode of the site and not the one of the Light / Dark switch of the preview. Close it with its button, with the cross of its header or with Esc.

Recipes

Confirmation

A modal-sm dialog with two buttons in the modal-footer. close-cancel closes the dialog and cancels the actions that were waiting for it, so a Cancel button stops the chain that opened it; close lets it go on.

<button id="Remove" label="Remove customer" icon="trash" style="btn-danger">
  <button-action type="dialog" target="RemoveDlg" />
</button>

<dialog id="RemoveDlg" label="Remove the customer?" style="modal-sm">
  <tag type="div" style="modal-body" label="The customer and its orders will be deleted." />
  <tag type="div" style="modal-footer">
    <button id="Cancel" label="Cancel" style="btn-ghost">
      <button-action type="close-cancel" target="RemoveDlg" />
    </button>
    <button id="Confirm" label="Remove" style="btn-danger">
      <button-action type="close" target="RemoveDlg" />
    </button>
  </tag>
</dialog>

Form in a dialog

A dialog holds any component: here two criteria. The width classes are modal-sm (300px), modal-md (600px) and modal-lg (900px).

<dialog id="EditDlg" label="Edit customer" style="modal-md">
  <tag type="div" style="modal-body">
    <criteria id="Name" component="text" label="Name" placeholder="Full name" validation="required" />
    <criteria id="Email" component="text" label="Email" placeholder="name@company.com" icon="lucide:mail" />
  </tag>
  <tag type="div" style="modal-footer">
    <button id="Save" label="Save" style="btn-primary">
      <button-action type="close" target="EditDlg" />
    </button>
  </tag>
</dialog>

Events and actions

The dialog stores the open and close events when it is opened and closed, so a dependency can react to them. It is opened and closed with actions of the buttons.

Action	Description
dialog	Opens the dialog named in target
close	Closes the dialog and goes on with the actions that were waiting
close-cancel	Closes the dialog and cancels the actions that were waiting

With on-close="reject" the cross of the header and Esc act as close-cancel; by default (accept) they act as close. With deferred="true" the data of the components of the dialog loads the first time it opens.

More

• Full documentation of the dialog: attributes, footer, deferred loading and more.
• XSD reference of the dialog element.