The Dialog component displays content in a modal overlay, with backdrop dimming and smooth animations.
Installation
import {
Dialog,
DialogTrigger,
DialogPortal,
DialogBackdrop,
DialogViewport,
DialogPopup,
DialogTitle,
DialogDescription,
DialogClose,
DialogFooter,
} from "@craftdotui/baseui/components/dialog";
Usage
<Dialog>
<DialogTrigger>Open Dialog</DialogTrigger>
<DialogPortal>
<DialogBackdrop />
<DialogViewport>
<DialogPopup>
<DialogTitle>Dialog Title</DialogTitle>
<DialogDescription>
This is the dialog description.
</DialogDescription>
<DialogFooter>
<DialogClose>Close</DialogClose>
</DialogFooter>
</DialogPopup>
</DialogViewport>
</DialogPortal>
</Dialog>
Components
Dialog (Root)
Default open state for uncontrolled usage.
Callback when open state changes.
DialogTrigger
The trigger element that opens the dialog when clicked.
DialogBackdrop
The backdrop overlay with blur effect.
The dialog content container with border, shadow, and animations.
DialogTitle
Required for accessibility - provides the dialog’s accessible name.
DialogDescription
Provides the dialog’s accessible description.
DialogClose
Closes the dialog when clicked.
Helper component for footer layout.
Examples
Confirmation Dialog
<Dialog>
<DialogTrigger>
<Button>Delete Account</Button>
</DialogTrigger>
<DialogPortal>
<DialogBackdrop />
<DialogViewport>
<DialogPopup>
<DialogTitle>Are you sure?</DialogTitle>
<DialogDescription>
This action cannot be undone. This will permanently delete your account.
</DialogDescription>
<DialogFooter>
<DialogClose>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button variant="destructive">Delete</Button>
</DialogFooter>
</DialogPopup>
</DialogViewport>
</DialogPortal>
</Dialog>
Controlled Dialog
const [open, setOpen] = useState(false);
<Dialog open={open} onOpenChange={setOpen}>
{/* ... */}
</Dialog>
Accessibility
- Built on @base-ui/react for ARIA compliance
- Traps focus within the dialog
- Closes on Escape key
- Returns focus to trigger on close
- Requires DialogTitle for accessible name
- Backdrop prevents interaction with background