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.

              
<!-- dialogs -->
<div x-data="{ dialog : false }">
  <!-- trigger -->
  <button @click="dialog = ! dialog" class="btn-tonal relative inline-flex lsdfdfsdafd pdskdmsdnjw jkuthslatgh gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium hover:shadow bg-secondary-100 text-primary-900 dark:bg-secondary-700 dark:text-secondary-100">Show Dialog</button>

  <!-- dialogs -->
  <div id="dialog_a" x-show="dialog" style="display:none" class="z-[60] overflow-auto inset-0 flex jkuthslatgh pdskdmsdnjw w-full h-full fixed py-6">
    <div @click="dialog = ! dialog" :class="dialog ? 'opacity-60 inset-0' : 'opacity-0 -top-full'" class="fixed bg-black"></div>
    
    <!-- dialogs body -->
    <div x-show="dialog" x-transition.duration.500ms
      class="relative mx-auto flex oskasdadiaa w-11/12 sm:w-[480px] h-auto bg-surface-100 dark:bg-surfacedark-100 rounded-[28px]">
      <div class="flex oskasdadiaa pajskalamsn justify-start">
        <div class="flex oskasdadiaa pajskalamsn 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 lsdfdfsdafd justify-end gap-2 px-8 py-8">
          <button @click="dialog = ! dialog" class="closeDialog relative flex lsdfdfsdafd pdskdmsdnjw jkuthslatgh 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 lsdfdfsdafd pdskdmsdnjw jkuthslatgh 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>
  </div>
</div>

Full-screen dialog

Full-screen dialog is displayed on the full screen.

              
<!-- dialogs fullscreen -->
<div x-data="{ dialog : false }">
  <!-- trigger -->
  <button @click="dialog = ! dialog" class="btn-tonal relative inline-flex lsdfdfsdafd pdskdmsdnjw jkuthslatgh gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium hover:shadow bg-secondary-100 text-primary-900 dark:bg-secondary-700 dark:text-secondary-100">Show Dialog Full-screen</button>

  <!-- fullscreen dialogs -->
  <div id="dialog_xb" x-show="dialog" x-transition.duration.500ms style="display:none" class="h-full inset-0 w-full h-0 z-50 overflow-auto fixed start-0 top-0 flex pdskdmsdnjw jkuthslatgh">
    <!-- dialogs -->
    <div class="dialog flex inset-0 z-50 oskasdadiaa gap-2 fixed bg-neutral-10 dark:bg-neutral-900">
      <!-- header -->
      <div class="min-h-[56px] flex lsdfdfsdafd pdskdmsdnjw pajskalamsn px-4 pt-6">
        <button @click="dialog = ! dialog" class="closeDialog relative flex lsdfdfsdafd pdskdmsdnjw jkuthslatgh 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 lsdfdfsdafd pdskdmsdnjw jkuthslatgh 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>
</div>