# Dialog

> Modal window for confirmations and focused tasks.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/dialog.json`

## Install

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

### Destructive confirmation

The standard confirm pattern for irreversible actions.

```tsx
<Dialog>
  <DialogTrigger asChild>
    <Button variant="destructive">Delete workspace</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Delete workspace?</DialogTitle>
      <DialogDescription>
        This permanently deletes the workspace and all of its data.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="ghost">Cancel</Button>
      </DialogClose>
      <Button variant="destructive">Delete</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>
```

### Scrollable body

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

```tsx
<DialogContent>
  <DialogHeader>
    <DialogTitle>Terms of service</DialogTitle>
    <DialogDescription>Updated August 2026.</DialogDescription>
  </DialogHeader>
  <div className="-mx-6 max-h-64 overflow-y-auto border-y px-6 py-4">
    {/* any amount of content: scrolls between pinned header/footer */}
  </div>
  <DialogFooter>
    <Button>Accept</Button>
  </DialogFooter>
</DialogContent>
```

### Form in a dialog

```tsx
<Dialog>
  <DialogTrigger asChild>
    <Button>Rename project</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Rename project</DialogTitle>
    </DialogHeader>
    <div className="space-y-2">
      <Label htmlFor="project-name">Project name</Label>
      <Input id="project-name" defaultValue="aspyn-crm" />
    </div>
    <DialogFooter>
      <Button>Save</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>
```

### Custom close button

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

```tsx
<DialogContent showCloseButton={false}>
  <DialogHeader>
    <DialogTitle>Invite teammates</DialogTitle>
    <DialogDescription>Send an invite to join this workspace.</DialogDescription>
  </DialogHeader>
  <DialogFooter>
    <DialogClose asChild>
      <Button variant="outline">Not now</Button>
    </DialogClose>
    <Button>Send invite</Button>
  </DialogFooter>
</DialogContent>
```

### No close button

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

```tsx
<DialogContent showCloseButton={false}>
  <DialogHeader>
    <DialogTitle>Session expired</DialogTitle>
    <DialogDescription>Sign in again to continue.</DialogDescription>
  </DialogHeader>
  <DialogFooter>
    <Button>Sign in</Button>
  </DialogFooter>
</DialogContent>
```

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