Dialog

A window overlaid on the interface that requires user interaction.

Basic Dialogs

Default

<Dialog>
  <DialogTrigger asChild={true}>
    <Button>
      Open Dialog
    </Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>
        Payment Successful
      </DialogTitle>
      <DialogDescription>
        Your payment has been successfully processed. We've sent you an email with all of the details of your order.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button onClick={() => {}}>
        Got it, thanks!
      </Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Confirmation Dialog

<Dialog>
  <DialogTrigger asChild={true}>
    <Button variant="danger">
      Delete Item
    </Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>
        Delete Item
      </DialogTitle>
      <DialogDescription>
        Are you sure you want to delete this item? This action cannot be undone.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button variant="outline">
        Cancel
      </Button>
      <Button variant="danger">
        Delete
      </Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Dialog Variants

Force Visible Dialog

<Dialog open={false} onOpenChange={() => {}}>
  <DialogTrigger asChild={true}>
    <Button>
      Force Visible Dialog
    </Button>
  </DialogTrigger>
  <DialogContent forceVisible={true} className="max-w-sm">
    <DialogHeader>
      <DialogTitle>
        Can't Close This Dialog
      </DialogTitle>
      <DialogDescription>
        This dialog has the forceVisible prop set, preventing it from being closed by clicking outside or pressing ESC.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button onClick={() => {}}>
        Close Dialog
      </Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Dialog Props

Hide Close Button

<Dialog>
  <DialogTrigger asChild={true}>
    <Button>
      No Close Button
    </Button>
  </DialogTrigger>
  <DialogContent hideCloseButton={true}>
    <DialogHeader>
      <DialogTitle>
        No Close Button
      </DialogTitle>
      <DialogDescription>
        This dialog has the hideCloseButton prop set, removing the default close button.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogTrigger asChild={true}>
        <Button>
          Close Dialog
        </Button>
      </DialogTrigger>
    </DialogFooter>
  </DialogContent>
</Dialog>