Dialog

Usage

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@zynactra/ui/dialog"

<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you absolutely sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

Examples

Open from a menu

When a menu item opens a dialog, keep the dialog outside the menu and control it with open. The menu closes; the dialog stays. Point finalFocus at the menu trigger so focus returns there.

Save, then close

For a form that calls an API: stay open and block dismissal while saving, close on success, and show a failure next to the field without closing.

Guidelines

• Footer actions go bottom-right in the sunken footer, primary last.
• For destructive confirmations use AlertDialog and make the user type the name.
• A dialog that saves stays open until the save succeeds. On failure, keep what the user typed and say what went wrong in the dialog.

API reference

Behaviour and props come from Base UI. See the Base UI Dialog docs.