Dialog

Centered modal dialog built on Radix UI. Supports controlled state, uncontrolled state, trigger elements, and ref-based open/close.

Props

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state
`onOpenChange`	`(open: boolean) => void`	—	Called when open state changes
`onClose`	`() => void`	—	Called when the dialog finishes closing
`children`	`ReactNode`	—	Dialog content
`trigger`	`ReactNode`	—	Optional trigger element that opens the dialog
`title`	`string`	—	Dialog title (rendered in header, required for accessibility)
`showClose`	`boolean`	`true`	Whether to show the close (X) button
`closeOnOverlayClick`	`boolean`	`true`	Whether clicking the overlay closes the dialog
`overlayColor`	`string`	`rgba(0,0,0,0.5)`	Overlay background color
`backgroundColor`	`string`	`#ffffff`	Dialog panel background color
`borderRadius`	`string \| number`	`16`	Dialog panel border radius
`maxWidth`	`string \| number`	`500`	Dialog max width
`padding`	`string \| number`	`24`	Dialog panel padding
`className`	`string`	—	Panel className
`style`	`CSSProperties`	—	Panel style

Ref Handle

Method	Description
`open()`	Open the dialog
`close()`	Close the dialog

Example


const dialogRef = useRef<DialogHandle>(null)
 
<Dialog ref={dialogRef} title="Confirm purchase">
  <p>You will be charged $9.99</p>
  <button onClick={() => dialogRef.current?.close()}>Confirm</button>
</Dialog>
 
<button onClick={() => dialogRef.current?.open()}>Buy now</button>

Uncontrolled with a trigger:


<Dialog trigger={<button>Open</button>} title="Settings">
  <p>Dialog content here</p>
</Dialog>