API and Development
Dialog displays a dialog overlay that focuses user attention on specific content or actions, typically used for confirmations, forms, or important information. It provides a flexible dialog interface with header, content, and footer sections, supporting confirmations, cancellations, and various interaction patterns. Built with portal rendering and animation support, it ensures consistent modal patterns across the interface with full keyboard and screen reader accessibility.
| Name | Default | Description |
|---|---|---|
id | required | Unique identifier for the modal. Used with Dialog to manage modal state. |
heading | required | The heading text displayed at the top of the modal. |
children | required | The content to display inside the modal body. |
onConfirm | required | Callback function called when the confirm button is clicked: () => void. |
onConfirmText | "Confirm" | Text to display on the confirm button. LocalizedMessage—copy from formatMessage. |
onCancel | Optional callback function called when the cancel button is clicked: () => void. | |
onCancelText | "Cancel" | Text to display on the cancel button. Only shown when onCancel is provided. LocalizedMessage—copy from formatMessage. |
noDismiss | false | Whether the modal can be dismissed by clicking the backdrop or dismiss button. |
shouldAllowDismiss | Called before backdrop or header-X dismiss. Return false to keep the modal open. | |
confirmDisabled | false | Whether the confirm button should be disabled. |
closeOnConfirm | true | Whether the modal should close automatically when the confirm button is clicked. |
destructive | false | Whether the modal should use destructive styling for the confirm button. |
Scrollable component for modals with long content.
Dialog and include Portal to enable modal functionality.
Dialog hook to control modal visibility (open, close, isOpen).