Getting startedFoundationsUtilitiesComponentsReleasesSupportGetting startedFoundationsUtilitiesComponentsReleasesComponent StatusAccordion GroupAccordionCollapseBadgeButtonButton DropdownCardStatus CardContentData GridData Grid Table HeaderDate PickerDate Picker InputDate Range PickerDate Range Picker ButtonInputSelectText AreaCheckboxCheckbox GroupRadio ButtonRadio Button GroupComboboxIconIcon LibraryListList Parent ItemList ItemList HeaderHeaderMobile SubheaderFooterFooter ItemSidebarAlertToastToast GroupDialogModalPanelPopoverPaginationSpinnerTabsTab GroupTabTab Panel GroupTab PanelToggle

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

Open dialog

Dialog content goes here.

<som-button color="primary" onClick="document.getElementById('dialogEl').open()">
Open dialog
</som-button>
<som-dialog id="dialogEl" headline="Dialog headline" size="lg">
<p>Dialog content goes here.</p>
</som-dialog>

Props

AttrTypeDefaultDocs

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 ESC key.

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

NameReturnsDocs

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

EventDetailDocs

dialogClose

any

This event is emitted after the dialog closes.

dialogConfirm

any

This event is emitted when a confirmation button is clicked. The boolean event.detail.confirmation is returned, where confirm is equal to true and cancel is equal to false.

dialogOpen

any

This event is emitted before the dialog opens.

Healthy

Healthy content is accurate and represents our most up-to-date recommendations.

Get in touch

Do you have an idea, or want to help us improve this page? Reach out to us via email.

DTMB-DG-Support@michigan.gov

Need help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.

Get in touch

Do you have an idea, or want to help us improve this page? Reach out to us via email.

DTMB-DG-Support@michigan.gov

Need help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.

Open source