ModalDialog
An interrupting dialog to focus the user's attention.
Use ModalDialog to interrupt the user with important content and expects a response. It expects a title and a primary action.
Opening the dialog
There are two ways to open the dialog. The first one is to use a trigger element which will be rendered and will trigger the dialog when tapped upon.
The other way is to use state to show or hide the dialog. This requires using open and onChange.
Primary action
Use primaryAction to add an action that performs some operation.
Secondary action
Use secondaryAction to add an action that closes the dialog without any action. You can also specify an action to perform when it is tapped using secondaryAction.onClick.
Size
Use the size property to control size of the dialog.
With overflow
Back Button
Use the onBack property to show a back button. Set this to an action that will be performed when pressed.
Alert Message
Use the alert property to show an alert with appropriate tone and an optional icon.
Custom Header and Footer
Use the headerContent and footerContent properties to add customisation to the fixed header and footer parts of the modal.