Dialog

Also known as

Modal, Modal dialog, Overlay, Popup
Available since
@salt-ds/core@1.20.0

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.

Dialogs are interruptive by nature and should be used sparingly. Use dialogs to present or gather critical information that requires immediate action, whether it’s directly or indirectly part of the user’s current task. For example, a warning dialog that appears when a document is closed without being saved—and asks how the user wishes to proceed—is indirectly related to the user’s task.

  • To notify the user of critical information related to their current workflow that requires immediate action.
  • To interrupt the user's flow.
  • When you don't need to interrupt the user's flow. If the information is part of an event that’s occurred in a peripheral application or workflow, use Toast instead. If the information is related to the current workflow, use Banner instead.
  • To launch a dialog from another dialog. Users may struggle to dismiss the two dialogs and may not understand which dialog is higher priority. Consider an alternative solution, such as progressively disclosing information in the first dialog.

For status dialogs you can set the status prop to error, warning, success, or info to render a status icon in the title and change the border color of the dialog. For accessibility reasons, pass role="alertdialog" to the dialog component when rendering an alert dialog. You should rely on users' acknowledgment of the message by clicking the action button.

To import Dialog and related components from the core Salt package, use:

NameTypeDescriptionDefault
NameTypeDescriptionDefault
NameTypeDescriptionDefault
NameTypeDescriptionDefault
NameTypeDescriptionDefault