Dialog

The Dialog component is used to show content on top of an overlay that requires user interaction.

DetailsProperties

Usage

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.


Terminology

BlueprintJS pointed out in their documentation that “modal” is a misnomer for “dialog”.


Focus Management

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.


Default dialog example

Default with a danger intent

The intent prop determines the appearance of the confirm button, danger is red.

Internal scrolling

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.

Self managed close

Use the hasFooter prop to show or hide the footer. This will hide the confirm and cancel buttons.

Remove default header

Use the hasHeader prop to show or hide the header. This will hide both the close icon button as the title.

Preserve scroll position and prevent body scrolling

Use the preventBodyScrolling prop to disable scrolling outside the dialog.