Skip to main content

Dialog

A dialog box (Dialog) is a temporary pop-up that takes focus from the page or app and requires people to interact with it. It’s primarily used for confirming actions, such as deleting a file, or asking people to make a choice.

Properties#

NameTypeDefaultDescription
openboolfalseWhether the dialog is shown.
typestringnormalDialog type: normal - standard dialog, largeHeader - dialog with large header banner, close - dialog with an 'x' close button in the upper-right corner.
titlestringThe title text to display at the top of the dialog.
subTextstringThe subtext to display in the dialog.
autoDismissboolfalseWhether dialog should be automatically hidden when dismissed.
widthstringMinimum width of the dialog.
maxWidthstringMaximum width of the dialog.
heightstringHeight of the dialog.
fixedTopboolfalseThe Dialog that maintains its top position and expands only the bottom, offering a more stable appearance when a Dialog's content changes dynamically.
blockingboolfalseWhether the dialog can be light dismissed by clicking outside the dialog (on the overlay).
datastringAdditional data attached to the control. The value is passed in dismiss event data.

Events#

NameDescription
dismissFires when the dialog is dismissed. Dialog is dismissed when a user clicks "close" button or clicks outside of non-blocking dialog.

Child controls#

  • Any control - will be rendered in the body of the dialog.
  • Footer

Footer control#

Serves as a container for dialog footer controls.

Child controls#

Any control.

Examples#

# TODO