Dialog

A modal dialog for confirmations, forms, and alerts.

Install

npx @beaket/ui add dialog

import { Dialog } from "@/components/ui/dialog"

Name	Type	Default	Description
preventClose	boolean \| undefined	false	When true, prevents closing the dialog via ESC key or clicking outside. Users must use the close button or action buttons to dismiss the dialog.
hideCloseButton	boolean \| undefined	false	When true, hides the X close button in the top-right corner. Useful with preventClose when you want users to use only action buttons.
trigger	ReactNode	—	Element that opens the dialog when clicked. Can be any clickable element like Button, link, or custom trigger. Optional - if not provided, dialog must be controlled via open/onOpenChange props.
children	ReactNode	—	Dialog content including Header, Description, Footer, and custom elements
open	boolean \| undefined	—	Controlled open state of the dialog. When provided, you must also provide onOpenChange to handle state updates.
onOpenChange	((open: boolean) => void) \| undefined	—	Callback when the open state changes. Required when using controlled mode (open prop).
closeWhen	unknown	—	When this value becomes truthy, automatically close the dialog. Useful for closing dialog after successful form submission via React Router action.