Components · shadcn dialog, alert-dialog

Dialog

A soft panel on surface-raised over a plain backdrop with no blur. It fades and rises 8px as it opens and closes instantly. Base UI traps focus and returns it to the trigger.

Dialog

Title and close button, a body that scrolls when long, then actions: secondary first, then primary, stacked full-width on phones. Form dialogs pass disablePointerDismissal, so a stray click on the backdrop never loses what was typed.

Preview

Show code

<Dialog disablePointerDismissal>
  <DialogTrigger render={<Button />}>Write a note</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Note for the interviewer</DialogTitle>
      <DialogDescription>…</DialogDescription>
    </DialogHeader>
    <DialogBody>…</DialogBody>
    <DialogFooter showCloseButton>
      <Button variant="primary">Save</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Destructive confirmation

Pairs a danger action that names what it does with “Cancel”. Initial focus lands on “Cancel”. While the action is loading, guard onOpenChange so Esc and the backdrop are ignored.

Preview

Show code

<AlertDialog>
  <AlertDialogTrigger render={<Button variant="danger" />}>Reject applicant</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Reject Raka Pratama?</AlertDialogTitle>
      <AlertDialogDescription>…</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Reject applicant</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Photo viewer

The gallery (L7) opens a photo in a large dialog with its caption.

Rules

Size	Use
`sm`	Confirmations, the WeChat QR
`md`	Default, short forms
`lg`	Photo viewer
`full`	The mobile menu

Close with Esc, the close button or Cancel. A backdrop click closes non-form dialogs only.
Never open a dialog on page load. Never stack dialogs.

Don’t

“OK / Cancel” on a destructive confirmation.

“Cancel” and an action that names itself: “Reject applicant”, “Delete event”.