Dialog

Sizes

Three sizes scale interior padding, gap, title typography, and footer spacing together: sm (320px) for compact confirmations, md (448px, default) for typical forms, lg (768px) for wide layouts.

Destructive — simple confirmation

Low-risk destructive actions: a clear title + description + cancel/confirm pair. Use for revertible or low-impact deletions.

Destructive — typed confirmation

For high-stakes destruction (deleting a listing with associated leads, deals, documents), require the user to type the resource's name. The destructive button stays disabled until the typed value matches exactly — prevents accidental clicks on irreversible actions.

Long content with scroll

For dialogs with content that may exceed viewport height (terms & conditions, long forms), wrap the body section in a scrollable container. The DialogHeader and DialogFooter stay outside the scroll region so the title and actions remain visible.