Dialog

Installation

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
} from "@aspyn-io/kit";

Destructive confirmation

The standard confirm pattern for irreversible actions.

Scrollable body

Long content? Wrap the middle in an overflow container so the header and footer stay pinned while it scrolls.

Form in a dialog

Custom close button

Hide the built-in corner X with showCloseButton={false} and provide your own DialogClose.

No close button

Force an explicit choice: hide the corner X so Escape/overlay still close, but the primary path is a footer action.

Notes

• Focus is trapped inside the dialog and returned to the trigger on close (Radix).
• Escape and clicking the overlay close it; DialogTitle is required for accessible naming.
• For controlled dialogs (e.g. close after async save), use open + onOpenChange.