Dialogs

Dialogs (Modal) provide important prompts in a user flow. Dialogs can require an action, communicate information, or help users accomplish a task. There are two types of dialogs: basic and full-screen.

Basic dialog

The Basic dialog is displayed in the center of the screen. You have to add .show classes to show components. Use javascript or your favorite framework to add classes.

              
<!-- trigger dialogs -->
<button data-type="dialogs" data-target="#dialog_xa">Show Dialog</button>

<!-- default dialogs -->
<div id="dialog_xa" class="[&.show_.backDialog]:opacity-60 [&.show]:opacity-100 [&.show]:h-full [&.show_.backDialog]:block [&.show_.backDialog]:inset-0 [&.show]:inset-0 duration-[400ms] ease-[cubic-bezier(0, 0, 0, 1)] opacity-0 w-full h-0 z-50 overflow-auto fixed left-0 top-0 flex items-center justify-center">
  <div data-close="#dialog_xa" class="backDialog hidden z-40 overflow-auto fixed bg-black"></div>
  <!-- dialogs -->
  <div class="z-50 flex flex-col w-11/12 sm:w-[480px] h-auto bg-surface-300 dark:bg-surfacedark-300 rounded-[28px]">
    <div class="flex flex-col gap-4 justify-start px-8 pt-8 pb-0">
      <h3 class="text-title-lg text-gray-900 dark:text-gray-100">Basic dialog title</h3>
      <p class="text-sm tracking-[0.25px] leading-5">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.</p>
    </div>
    <div class="flex flex-row justify-end gap-2 px-8 py-8">
      <button data-close="#dialog_xa" class="closeDialog relative flex flex-row items-center justify-center gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium text-primary-600 hover:bg-surface-200 focus:bg-surface-400 dark:text-primary-200 dark:hover:bg-surfacedark-200 dark:focus:bg-surfacedark-400">
        Cancel
      </button>

      <button class="btn relative flex flex-row items-center justify-center gap-x-2 py-2.5 px-6 rounded-[6.25rem] hover:shadow-md text-sm tracking-[.00714em] font-medium bg-primary-600 text-white dark:bg-primary-200 dark:text-primary-800">
        Save
      </button>
    </div>
  </div>
</div>

Full-screen dialog

Full-screen dialog is displayed on the full screen. You have to add .show classes to show components. Use javascript or your favorite framework to add classes.

              
<!-- trigger full width dialogs -->
<button data-type="dialogs" data-target="#dialog_xb">Show Full-screen Dialog</button>

<!-- fullscreen dialogs -->
<div id="dialog_xb" class="[&.show]:opacity-100 [&.show]:h-full [&.show]:inset-0 [&.show_.dialog]:flex [&.show_.dialog]:inset-0 opacity-0 w-full h-0 z-50 overflow-auto fixed left-0 top-0 flex items-center justify-center">
  <div class="backDialog opacity-0"></div>
  <!-- dialogs -->
  <div class="dialog hidden z-50 flex-col gap-2 fixed bg-neutral-10 dark:bg-neutral-900">
    <!-- header -->
    <div class="min-h-[56px] flex flex-row items-center gap-4 px-4 pt-6">
      <button data-close="#dialog_xb" class="closeDialog relative flex flex-row items-center justify-center gap-x-2 p-2.5 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium text-primary-600 hover:bg-surface-200 focus:bg-surface-400 dark:text-primary-200 dark:hover:bg-surfacedark-200 dark:focus:bg-surfacedark-400">
        <span class="material-symbols-outlined">close</span>
      </button>

      <h3 class="text-title-lg flex flex-grow">Full-screen Dialogs</h3>

      <button class="relative flex flex-row items-center justify-center gap-x-2 py-2.5 px-4 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium text-primary-600 hover:bg-surface-200 focus:bg-surface-400 dark:text-primary-200 dark:hover:bg-surfacedark-200 dark:focus:bg-surfacedark-400">
        <span class="material-symbols-outlined">save</span>
        Save
      </button>
    </div>
    <!-- body -->
    <div class="relative text-body-lg px-8 md:px-20 py-4 overflow-y-scroll scrollbars">
      <p class="mb-4">Insert content in here.</p>
    </div>
  </div>
</div>