Dialog

shadcn/ui dialog on DESIGN.md tokens. A panel above the page: surface on a hairline with the one soft shadow, 16px radius, 24px padding, over a black/60 scrim. Title is the h2 step (24/600); the footer sits on surface-2 behind a hairline with the primary action last. Enter and exit take the 200ms standard step. The corner close is named Close unless closeLabel says otherwise. For decisions that must not be dismissed by clicking outside, use Alert dialog; for side panels, Sheet.

<Dialog>
  <DialogTrigger asChild><Button variant="outline">Edit</Button></DialogTrigger>
  <DialogContent>
    <DialogHeader><DialogTitle>Edit supplier</DialogTitle><DialogDescription>…</DialogDescription></DialogHeader>
    …
    <DialogFooter><DialogClose asChild><Button variant="outline">Cancel</Button></DialogClose><DialogClose asChild><Button>Save</Button></DialogClose></DialogFooter>
  </DialogContent>
</Dialog>

Form

Two fields, cancel and save. Escape, the overlay and the corner button all close it.

Long content

Header and footer stay put; the middle scrolls inside 85vh.

Footer close

No corner button; the footer supplies Close instead.

Controlled

Locked while the action runs, shows the success check, then closes itself.