Dialog

The purpose of a Dialog is to provide actionable messaging and may appear contextually or as a modal. The Dialog adapts to various amounts and types of content. For contextual, non-actionable messaging, consider the Tooltip instead.

Install the component dependency:

Include a React component in your project:

Name
Value
Description
Default
disableCloseButton
boolean
removes close button UI
false
disableCloseOnEscape
boolean
prevents closing Dialog with escape key
false
disableCloseOnOverlayClick
boolean
prevents clicking modal overlay to close Dialog
false
disableFocusOnMount
boolean
prevents focus the Dialog on render
false
innerRef
DOM element => ()
react ref callback
modal
boolean
makes Dialog modal
false
onClose
Event => ()
callback to be called by various close methods
tailPosition
topLeft | topCenter | topRight | bottomLeft | bottomCenter | bottomRight
positions a tail pointer (from Dialog.tailPositions)

Dialogs can be shown with or without a tail (a directional indicator). To make the tail appear, use a Dialog.tailPositions option.tion.

Dialogs may be closed using one of a number of methods: clicking the close button, clicking the overlay (in the case of a modal Dialog), and pressing the escape key. One or all of these methods, if available, will call the onClose function when triggered.ered.

A modal Dialog will be shown fullscreen with an overlay behind and positioned in the center of the viewport.

When a modal Dialog (or non-modal Dialog) are shown on the screen, it will take browser focus. In the case of a modal Dialog, the rest of the body of the application will continue to be visible through the translucent overlay. But it should be hidden. To hide it from screenreaders, add an aria-hidden=true attribute to your application's containing node, and make sure Dialog is mounted outside of that node. To hide it from keyboard users, add a tabindex="-1" to that same application node.

In most cases, dialogs can assume the user to digest the content following a Z-Pattern. Readers will start in the top/left, move horizontally to the top/right and then diagonally to the bottom/left before finishing with another horizontal movement to the bottom/right. By that measure, place your actions at the bottom/right, with the primary action on the right.

Title

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation

Do

Title

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation

Don't

Don’t use modal dialogs when displaying non-critical information that doesn’t need to interrupt a workflow. Consider a dialog interaction which would be less intrusive.

Bookmark added. Undo?
Do

Bookmark added

Oh joy! You have successfully added a new bookmark.

Don't

Be explicit as possible when writing dialog buttons. Use affirimitive action text to clearly indicate the outcome of the decision. [Material Design]

Delete record?

This action cannot be reversed. Are you sure you want to delete this record?

Do

Delete record?

This action cannot be reversed. Are you sure you want to delete this record?

Don't