A dialog is used to show important content above all other elements within the page. This is normally used for alerts, confirmations, or just temporary content. The dialog within react-md also has the additional features for accessibility:

• automatically focus the dialog on mount for keyboard users
• prevent elements outside of the dialog to be focused
• close via the escape key (see the modal example below for more info)
• prevent the page outside of the dialog from being scrolled

To complete the dialog accessibility requirements, every dialog must provide an id and either an aria-label describing the dialog or an aria-labelledby id that points to an element describing this dialog.

A full page dialog is really just as it seems: a dialog that covers the entire page. These sorts of dialogs are good to use when you want to display a lot of information temporarily but don't need to transition to a different page. Some good examples of this are:

• full screen previews for images or videos
• large temporary forms
• editing lots of data within a table

The example below will open a full screen preview of the image when it has been clicked.

Another common example for dialogs is to show a list of items and close the dialog when clicked. Since there is additional padding on the DialogContent component and the List component, you will want to just use the List component on its own in the dialog as well as update some padding values to match the dialog.

An alert dialog variant should be used when assistive technologies should immediately bring the user's attention to the dialog. This pattern is normally used for confirmation dialogs. To create an alert dialog, the only change required is to add a new prop: role="alertdialog".

Since you most likely want the user to press one of the actions in this dialog instead of being able to close it by clicking the overlay or the escape key, you can enable the modal prop to disable this behavior. The modal prop usually goes hand-in-hand with updating the role to be "alertdialog", but it can be used with a normal dialog as well.

You can also create dialogs that are fixed to other elements using the FixedDialog component. This is generally used alongside badges and buttons to show some additional information that can't be shown in a tooltip.

This dialog will be the same as other dialogs except for:

• the disableScrollLock prop is enabled by default
• the classNames are updated to be a scaling animation instead of transform
• the overlay will be invisible but still clickable

Since the disableScrollLock prop is enabled by default, the dialog will attempt to stay visible within the viewport while the user scrolls and then automatically hide once it can no longer stay in the viewport. This is kind of nice, but the drawback is that the page will scroll back to the fixedTo element due to normal Dialog focus behavior.

Another term for this component might be a PopoutDialog.

Dialogs can also be nested fairly easily since they use the @react-md/portal API behind the scenes so that the last created dialog will be shown over all the other dialogs. However, since each dialog creates its own overlay, the background will start getting darker and darker as more dialogs appear on the page and pressing the escape key will close all dialogs by default.

To fix this, there is an export component: NestedDialogContextProvider that you can add near the root of your app to automatically fix these problems. Once the component has been added to your app, the Dialog will check to see if it is the last created dialog. If it is not, it will disable the escape key close functionality as well as temporarily hide its own overlay so the screen doesn't get darker.