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:

NameValueDescriptionDefault
disableCloseButtonbooleanremoves close button UIfalse
disableCloseOnEscapebooleanprevents closing Dialog with escape keyfalse
disableCloseOnOverlayClickbooleanprevents clicking modal overlay to close Dialogfalse
disableFocusOnMountbooleanprevents focus the Dialog on renderfalse
innerRefDOM element => ()react ref callback
modalbooleanmakes Dialog modalfalse
onCloseEvent => ()callback to be called by various close methods
tailPositiontopLeft | topCenter | topRight | bottomLeft | bottomCenter | bottomRightpositions 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.

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.

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 from screenreaders. To do this, add an aria-hidden=true attribute to your application's containing node, and make sure Dialog is mounted outside of that 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