# 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 title

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.

### Full-screen Dialogs

Insert content in here.

## 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>

### Search

## Theme Settings

### Light & Dark

### Theme Colors

### Layouts