Dialog

Also known as

Modal, Modal dialog, Overlay, Popup

Similar to

Related patterns

Available since
@salt-ds/core@1.20.0

Resources

Support

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.

Best practices

Focus

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.

Initial focus

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.

Focus sequence

  • 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.

Keyboard interactions

KeyFunction
Tab
  • When the dialog is opened, Tab sets focus to the first focusable component in the dialog.
  • If focus is in the dialog, Tab sets focus to the next focusable component in the tab order.
  • If the last element in the dialog has focus, Tab wraps to the first focusable element in the dialog.
Shift + Tab
  • If focus is in the dialog, this action sets focus to the previous focusable component in the tab order.
  • If the first element in the dialog has focus, this action wraps to the last focusable element in the dialog.
Escape
  • If focus is in the dialog, Escape closes the dialog and returns focus to the triggering element.
Enter / Space
  • If focus is on a button in the dialog button bar, this action activates the button.
  • If focus is on the close button, this action activates the close button, closes the dialog and returns focus to the triggering element.

Previous Page

Date Picker

Next Page

Divider