Dialogs

Showcasing MICL dialogs

Showcase

Click a button to open one of the MICL dialogs.

Basic dialog

A dialog is a type of modal window that appears in front of app content to provide critical information, or prompt for a decision to be made.

Reset settings?

This will reset your app preferences back to their default settings. The following accounts will also be signed out:
  • JH johnny.hanssen@proton.me
  • LS laura.smith@outlook.com
  • LH lucy.hong@gmail.com

Delete selected images?

Images will be permanently removed from your account and all synchronized devices.

Delete selected images?

Images will be permanently removed from your account and all synchronized devices.

Personal info

Please specify personal information about the new employee.

Code example


<dialog id="id0" class="micl-dialog" style="width:300px" role="alertdialog" closedby="any" popover>
  <div class="micl-dialog__headline">
    <h2>Basic dialog</h2>
    <span class="micl-dialog__supporting-text">A dialog is a type of modal window.</span>
  </div>
  <div class="micl-dialog__actions">
    <button type="button" class="micl-button-text-s" popovertarget="id0">Cancel</button>
    <button type="button" class="micl-button-text-s">Action</button>
  </div>
</dialog>