Brand
Changelog v1.4

Modal

Modals overlay the page for focused interactions that require user attention.

Basic (dialog element)

Hello!

This modal uses the HTML dialog element.

With Actions

Are you sure?

This action cannot be undone. Do you want to proceed?

Close on Backdrop Click

Backdrop Close

Click outside this modal or press ESC to close it.

With Form

Edit Profile

Usage

<button class="sa:dui-btn" onclick="my_modal.showModal()">Open</button>
<dialog id="my_modal" class="sa:dui-modal">
  <div class="sa:dui-modal-box">
    <h3>Title</h3>
    <p>Content</p>
    <div class="sa:dui-modal-action">
      <form method="dialog">
        <button class="sa:dui-btn">Close</button>
      </form>
    </div>
  </div>
</dialog>