Component

Dialog

Modal dialog with overlay, scale animation, and accessible focus management via Base UI.

Usage

Use dialogs for focused tasks that require user input before continuing. Keep content concise.

Playground

Preview

Configure

Code

<Dialog>
  <DialogTrigger render={<Button variant="outline">Edit Profile</Button>} />
  <DialogPortal>
    <DialogOverlay />
    <DialogContent>
      <DialogClose />
      <DialogHeader>
        <DialogTitle>Edit Profile</DialogTitle>
        <DialogDescription>
          Make changes to your profile here. Click save when you are done.
        </DialogDescription>
      </DialogHeader>
      <div className="grid gap-3 py-4">
        <div className="grid gap-1.5">
          <Label htmlFor="name">Name</Label>
          <Input id="name" defaultValue="Jane Doe" />
        </div>
      </div>
      <DialogFooter>
        <DialogClose render={<Button variant="outline">Cancel</Button>} />
        <Button>Save changes</Button>
      </DialogFooter>
    </DialogContent>
  </DialogPortal>
</Dialog>

Do

  • Always provide a close button (X) and a Cancel action
  • Use for destructive confirmations and focused form flows

Don't

  • Don't stack dialogs, close the current one before opening another
  • Don't put scrolling content inside dialogs, use a drawer instead