Modal Dialog Stable Dark theme

Modal dialogs are used for processes that need a decision by the user. They are shown with a layer above the site content.

Usage Code

<uimc-modal-dialog title="" submit-button-label="">
  <p></p>
</uimc-modal-dialog>

Attribute	Description	Values	Default
title	Sets the dialog title	String	–
indicator	Sets an indicator if needed	`success`, `warning`, `error`	none
open	Reflects the state of visibility	–	false
submit-button-label	Adds a submit button with the given label	String	–
cancel-button-label	Adds a cancel button with the given label	String	–
theme	Set the color scheme of the component	`light`, `dark`	`light`

Callback	Argument	Description
onSubmit	event	Pass a callback function that gets triggered when the submit button is pressed
onCancel	event	Pass a callback function that gets triggered when the cancel button is pressed

Slot	Slotted content
default	Body content of the Modal Dialog

Normal dialog

<uimc-modal-dialog id="modal-dialog" title="Dialog title" submit-button-label="Accept" cancel-button-label="Cancel">
  <p>Message dolor sit amet, consectetur adipis 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>
</uimc-modal-dialog>

Success dialog

<uimc-modal-dialog id="success-modal-dialog" title="Success title" indicator="success" submit-button-label="Accept" cancel-button-label="Cancel">
  <p>Message dolor sit amet, consectetur adipis 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>
</uimc-modal-dialog>

Warning dialog

<uimc-modal-dialog id="warning-modal-dialog" title="Warning title" indicator="warning" submit-button-label="Accept" cancel-button-label="Cancel">
  <p>Message dolor sit amet, consectetur adipis 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>
</uimc-modal-dialog>

Error dialog

<uimc-modal-dialog id="error-modal-dialog" title="Error title" indicator="error" submit-button-label="Accept" cancel-button-label="Cancel">
  <p>Message dolor sit amet, consectetur adipis 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>
</uimc-modal-dialog>

Dark theme

<uimc-modal-dialog id="dark-modal-dialog" title="Dialog title" submit-button-label="Accept" cancel-button-label="Cancel" theme="dark">
  <p>Message dolor sit amet, consectetur adipis 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>
</uimc-modal-dialog>