Dialog

Basic dialog

Basic dialog — see the example below.

tsx

import { Dialog } from "~/components/ui/base/dialog";
import { Button } from "~/components/ui/base/button";

<Dialog.Root>
  <Dialog.Trigger>Open dialog</Dialog.Trigger>
  <Dialog.Panel>
    <Dialog.Close class="absolute right-4 top-4 z-10" />
    <Dialog.Header>
      <Dialog.Title>Edit profile</Dialog.Title>
      <Dialog.Description>
        Here you can change the details shown to other users.
      </Dialog.Description>
    </Dialog.Header>
    <Dialog.Content>
      <p class="text-callout text-secondary-label">Main dialog content.</p>
    </Dialog.Content>
    <Dialog.Footer>
      <Dialog.Close class="rounded-md border border-separator-opaque bg-surface-raised px-4 py-2 text-callout font-medium text-label shadow-sm hover:bg-surface-overlay">
        Cancel
      </Dialog.Close>
      <Button>Save</Button>
    </Dialog.Footer>
  </Dialog.Panel>
</Dialog.Root>

Alert dialog

Set alert on Dialog.Root — headless sets role="alertdialog" and disables closing by clicking the backdrop.

tsx

import { Dialog } from "~/components/ui/base/dialog";

<Dialog.Root alert>
  <Dialog.Trigger>Delete account</Dialog.Trigger>
  <Dialog.Panel>
    <Dialog.Close class="absolute right-4 top-4 z-10" />
    <Dialog.Header>
      <Dialog.Title>Really delete?</Dialog.Title>
      <Dialog.Description>This action cannot be undone.</Dialog.Description>
    </Dialog.Header>
    <Dialog.Footer>
      <Dialog.Close class="rounded-md border border-separator-opaque px-4 py-2 text-callout">
        Cancel
      </Dialog.Close>
      <Dialog.Close class="rounded-md bg-system-red px-4 py-2 text-callout font-medium text-white">
        Delete
      </Dialog.Close>
    </Dialog.Footer>
  </Dialog.Panel>
</Dialog.Root>

Panel size (variant)

Set variant on Dialog.Panel ("xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "full") — dimensions are handled by data-dialog-size in global.css. Without variant the default width applies.

tsx

import { Dialog } from "~/components/ui/base/dialog";

<Dialog.Root>
  <Dialog.Trigger>Open large dialog</Dialog.Trigger>
  <Dialog.Panel variant="lg">
    <Dialog.Close class="absolute right-4 top-4 z-10" />
    <Dialog.Header>
      <Dialog.Title>Large dialog</Dialog.Title>
      <Dialog.Description>Panel with the `lg` variant.</Dialog.Description>
    </Dialog.Header>
    <Dialog.Content>
      <p class="text-callout text-secondary-label">More space for content.</p>
    </Dialog.Content>
  </Dialog.Panel>
</Dialog.Root>

Metadata

Source: meta.generated.json (see npm run generate)

File base/dialog/meta.generated.json not found or path not allowed.