Primitives

Dialog

Radix-backed modal with overlay, scrim, focus trap, and ESC-to-close. Pair it with DialogHeader / DialogFooter helpers.

With form

Trigger + form + footer

<Dialog>
  <DialogTrigger asChild>
    <Button>Create task</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Create new task</DialogTitle>
      <DialogDescription>Add a task to your board.</DialogDescription>
    </DialogHeader>
    {/* form fields */}
    <DialogFooter>
      <DialogClose asChild>
        <Button variant='ghost'>Cancel</Button>
      </DialogClose>
      <Button>Create</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Destructive confirmation

Confirm a destructive action

Parts

Dialog, DialogTrigger, DialogContent
DialogHeader, DialogTitle, DialogDescription
DialogFooter, DialogClose