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>