Component Modal

Modal dialogs are components that cover the screen to stop the user's action. They're used to draw attention to important details. Unlike dialogs, they don't need the user to take an action.

Get the UI kit

Example

Open modal

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

View code

<som-button color="primary" onclick="document.getElementById('modalEl').open()">
  Open modal
</som-button>
<som-modal id="modalEl" headline="Modal heading" size="lg">
  <div class="pb-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</som-modal>

Props

Attr	Type	Default	Docs
description	string		This property will not be displayed on the screen but will be used to further describe the modal to screen reader users.
enable-keyboard-close	boolean	true	This boolean is used to enable closing the modal with keyboard's ESC key.
enable-overlay-close	boolean	true	This boolean is used to enable closing the modal when clicking on the overlay outside of the modal.
headline	string		This property will be displayed in the header of your modal.
hide-close-button	boolean	false	This boolean is used to hide the header's close button.
modal-aria-label	string		This property sets the aria label of the modal.
modal-padding	string	"2"	This property is used to set padding around the card
size	"lg" \| "md" \| "sm"	'md'	This boolean is used to control the width of the modal.

Methods

Name	Returns	Docs
close	Promise will resolve when the close animation ends.	This method will close the modal.
open	Promise will resolve when the open animation ends.	This method will open the modal.
refresh	Promise will resolve after the refresh.	This method will refresh the modal. This is useful when modal data is loaded asynchronously.

Events

Event	Detail	Docs
modalClose	any	This event is emitted after the modal closes.
modalOpen	any	This event is emitted before the modal 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.