Dialog

A dialog is a temporary window that appears on top of the main content of an application, requiring user interaction before the underlying content can be accessed again.

Basic

Dialog component can be controlled by open and onClose props.
Dialog component can be self-closed by 3 reasons specified in the DialogCloseReason type: outside-press | escape-key | close-icon.
Dialog component requires at least one DialogContent and one DialogAction to render.

Full width

The default width of the Dialog component is fit-content. To make it full of available width, set the fullWidth prop to true.

Max width

You can change dialog max width by setting maxWidth prop to predefined values: xs, sm, md, lg, xl.
The default maxWidth value is sm.

Max width	Value
`xs`	448px
`sm`	608px
`md`	924px
`lg`	1240px
`xl`	1556px

Close Icon

You can custom the close icon by setting closeIcon prop.
You can hide the close icon by setting hideCloseIcon prop to true.

Close Dialog By Escape

By default, dialog component can be closed by clicking the escape key.
You can disable this behavior by setting the closeByEscape prop to false.

Close Dialog By Click Out Side

By default, dialog component can be closed by clicking out side.
You can disable this behavior by setting the closeByOutsideClick prop to false.

Customized Close Button

You can customize the close button by setting the closeButton prop.

Nested Dialog

Dialogs can be nested by using the Dialog component as a child of another Dialog component.

Initial Focus

You can set the initial focus element of the dialog when open by using the initialFocus prop.
The initialFocus prop can be either a number (tabbable index as specified by the order) or a ref.
You can set this to a negative number to ignore the initial focus.

Using with from

Scrolling long content of dialog

When dialogs become too long for the user’s viewport or device, the content of the DialogContent will be scrollable.

`<body>` scroll and return focus

By default, main content area is dimmed and scrolling is disabled. You can control scrolling behavior using the lockscroll prop.
When a dialog is open, returnFocus prop determines whether the focus should be returned to the element that initiated the dialog or if the current screen position should be preserved.
Default value for both lockScroll and returnFocus are true.

Accessibility

Dialog component follows WAI-ARIA recommendations on accessibility.

Roles, States, and Properties

Dialog is a regular div[role="dialog"] element. It has states and props as follows:

Dialog has aria-modal attribute set to true.
Dialog has aria-labelledby attribute set to the id of the DialogHeader component.
Dialog has aria-describedby attribute set to the id of the DialogContent component.

Keyboard interactions

Key	Function	Condition
`Tab`	Moves focus to next focusable element inside the dialog.	When focus is on the last focusable element in the dialog, moves focus to the first focusable element in the dialog.
`Shift + Tab`	Moves focus to previous focusable element inside the dialog.	When focus is on the first focusable element in the dialog, moves focus to the last focusable element in the dialog.
`Escape`	Closes the dialog.