Skip to Content
FrontendBundlesComponentsUI PrimitivesDialog

Dialog

A modal overlay dialog built on Radix UI Dialog. Has a built-in close button (×). Content is portalled to document.body.

Import

import {
  Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger,
  DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription,
} from "@phpcreation/frontend-components-react-nextjs-bundle/components/Dialog";

Sub-components

ComponentDescription
DialogRoot state controller
DialogTriggerElement that opens the dialog
DialogPortalRenders children outside the DOM tree
DialogOverlayBackdrop behind the dialog
DialogContentVisible dialog panel (includes built-in close ×)
DialogHeaderTop section — title and description
DialogTitleAccessible dialog title (required)
DialogDescriptionOptional subtitle
DialogFooterBottom action area
DialogCloseButton that closes the dialog

Usage

import {
  Dialog, DialogTrigger, DialogContent,
  DialogHeader, DialogTitle, DialogDescription,
  DialogFooter, DialogClose,
} from "...";
import { Button } from "...";
 
<Dialog>
  <DialogTrigger asChild>
    <Button>Open Settings</Button>
  </DialogTrigger>
  <DialogContent className="max-w-md">
    <DialogHeader>
      <DialogTitle>Account Settings</DialogTitle>
      <DialogDescription>
        Update your profile information below.
      </DialogDescription>
    </DialogHeader>
 
    {/* Body content */}
    <div className="py-4">
      <Input label="Name" />
    </div>
 
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="outline">Cancel</Button>
      </DialogClose>
      <Button>Save Changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

DialogTitle is required for accessibility. If you don’t want a visible title, render it with className="sr-only".

Last updated on
CollapsibleDefaultModalSkin