The Dialog component is used to show content on top of an overlay that requires user interaction.
Use the Dialog component when you require your user to interact with you app and don’t want your users to jump to a different page and break their workflow.
You should also use a dialog in cases where you need to ask for confirmation from the user before doing a lengthy or dangerous action. This could be a deletion of some sorts or initiating a lengthy download.
BlueprintJS pointed out in their documentation that “modal” is a misnomer for “dialog”.
When opening a Dialog, focus will be brought inside the Dialog. When using both the cancel and confirm button, the cancel button will get focus first.
When closing the Dialog, focus will be brought back to the element that was focused before opening the Dialog. This is normally the button that triggered the Dialog.
The intent prop determines the appearance of the confirm button, danger is red.
When content makes the dialog height greater than the available space in the viewport,
the content area will become scrollable
It will add a symmetric offset on the top and bottom — based on the topOffset prop.
Use the hasFooter prop to show or hide the footer.
This will hide the confirm and cancel buttons.
Use the hasHeader prop to show or hide the header.
This will hide both the close icon button as the title.
Use the preventBodyScrolling prop to disable scrolling outside the dialog.