Dialog
Dialog
Dialog
is a window that opens over the application content, focusing the user’s attention on a particular task or piece of information. It can communicate new information, errors, warnings, or successful completion of a process or task.
The dialog component will trap focus within the dialog when open. This means that the user will not be able to tab out of the dialog and focus will be set to the first focusable element within the dialog. When the dialog is closed, focus will return to the element that was focused before the dialog was opened.
You can control which element receives focus when the dialog is opened by passing an initialFocus
prop to the dialog component. This prop accepts a number, which indicates the index of the tabbable element within the dialog that should receive focus. If no element is found, focus will be set to the first focusable element within the Dialog. The initialFocus
can also be a ref to an element within the dialog.
- For dialogs that prompt for user confirmation, the call to action button takes focus first.
- For dialogs with destructive interactions, the cancel button takes focus first.
Key | Function |
---|---|
Tab |
|
Shift + Tab |
|
Escape |
|
Enter / Space |
|
The dialog component will trap focus within the dialog when open. This means that the user will not be able to tab out of the dialog and focus will be set to the first focusable element within the dialog. When the dialog is closed, focus will return to the element that was focused before the dialog was opened.
You can control which element receives focus when the dialog is opened by passing an initialFocus
prop to the dialog component. This prop accepts a number, which indicates the index of the tabbable element within the dialog that should receive focus. If no element is found, focus will be set to the first focusable element within the Dialog. The initialFocus
can also be a ref to an element within the dialog.
- For dialogs that prompt for user confirmation, the call to action button takes focus first.
- For dialogs with destructive interactions, the cancel button takes focus first.
Key | Function |
---|---|
Tab |
|
Shift + Tab |
|
Escape |
|
Enter / Space |
|
The dialog component will trap focus within the dialog when open. This means that the user will not be able to tab out of the dialog and focus will be set to the first focusable element within the dialog. When the dialog is closed, focus will return to the element that was focused before the dialog was opened.
You can control which element receives focus when the dialog is opened by passing an initialFocus
prop to the dialog component. This prop accepts a number, which indicates the index of the tabbable element within the dialog that should receive focus. If no element is found, focus will be set to the first focusable element within the Dialog. The initialFocus
can also be a ref to an element within the dialog.
- For dialogs that prompt for user confirmation, the call to action button takes focus first.
- For dialogs with destructive interactions, the cancel button takes focus first.
Key | Function |
---|---|
Tab |
|
Shift + Tab |
|
Escape |
|
Enter / Space |
|