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 klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 py-2.5 dkslaoeyhnmj rounded-[6.25rem] text-sm tracking-[.00714em] font-medium hover:shadow-sm 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] fioplahensmk inset-0 flex yhansklopals layhetgsjdcb 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 ioajsklehsnm w-11/12 sm:w-[480px] h-auto bg-surface-100 dark:bg-surfacedark-100 rounded-[28px]">
      <div class="flex ioajsklehsnm spoathnmkles cklsihrbanmq">
        <div class="flex ioajsklehsnm spoathnmkles cklsihrbanmq maksueyropls 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 klsuaonrmcha qjnakmsliyrh gap-2 maksueyropls py-8">
          <button @click="dialog = ! dialog" class="closeDialog relative flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 py-2.5 dkslaoeyhnmj 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 klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 py-2.5 dkslaoeyhnmj 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 klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 py-2.5 dkslaoeyhnmj rounded-[6.25rem] text-sm tracking-[.00714em] font-medium hover:shadow-sm 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 fioplahensmk fixed start-0 top-0 flex layhetgsjdcb yhansklopals">
    <!-- dialogs -->
    <div class="dialog flex inset-0 z-50 ioajsklehsnm gap-2 fixed bg-neutral-10 dark:bg-neutral-900">
      <!-- header -->
      <div class="min-h-[56px] flex klsuaonrmcha layhetgsjdcb spoathnmkles uajskeiolksb pt-6">
        <button @click="dialog = ! dialog" class="closeDialog relative flex klsuaonrmcha layhetgsjdcb yhansklopals 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 klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 py-2.5 uajskeiolksb 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 maksueyropls md:px-20 py-4 overflow-y-scroll scrollbars">
        <p class="mb-4">Insert content in here.</p>
      </div>
    </div>
  </div>
</div>