Component Dialog
Dialogs are components that cover the whole screen and stop a user in the middle of an action. Unlike modals, they do require steps to be taken in order to be closed.
Example
Dialog content goes here.
Props
Attr | Type | Default | Docs |
---|---|---|---|
cancel-text | string | 'Cancel' | This property is used to customize the text of the cancel option in a confirmation dialog. |
confirm-text | string | 'Confirm' | This property is used to customize the text of the confirm option in a confirmation dialog. |
description | string | This property will be used to further describe the dialog to users with screen readers. It won’t be displayed on the screen. | |
dialog-aria-label | string | This property sets the aria label of the dialog. | |
enable-keyboard-close | boolean | false | This boolean property is used to enable closing the dialog with keyboard's |
enable-overlay-close | boolean | false | This boolean property is used to enable closing the dialog when clicking on the overlay outside of the dialog. |
headline | string | This property will be displayed in the header of your dialog. | |
hide-close-button | boolean | true | This boolean property is used to hide the header's close button. |
is-destructive | boolean | false | This boolean property is used to determine what color the confirm action button will be in a confirmation dialog. |
size | "lg" | "md" | "sm" | 'md' | This property is used to control the width of the dialog. |
Methods
Name | Returns | Docs |
---|---|---|
close | Promise will resolve when the close animation ends. | This method will close the dialog. |
open | Promise will resolve when the open animation ends. | This method will open the dialog. |
refresh | Promise will resolve after the refresh. | This method will refresh the dialog. This is useful when dialog data is loaded asynchronously, which allows the component to find elements to focus on and provide accessibility support. |
Events
Event | Detail | Docs |
---|---|---|
dialogClose | any | This event is emitted after the dialog closes. |
dialogConfirm | any | This event is emitted when a confirmation button is clicked. The boolean |
dialogOpen | any | This event is emitted before the dialog opens. |
Healthy content is accurate and represents our most up-to-date recommendations.
Do you have an idea, or want to help us improve this page? Reach out to us via email.
DTMB-DG-Support@michigan.govNeed help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.
Do you have an idea, or want to help us improve this page? Reach out to us via email.
DTMB-DG-Support@michigan.govNeed help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.