Dialog
Modal dialogs for confirmations, forms, and focused tasks.
Alert dialog
A confirmation dialog requiring an explicit choice.
Alert dialog with icon
A confirmation dialog with a leading status icon.
Destructive alert dialog
A confirmation dialog for irreversible actions.
Terms and conditions
A dialog presenting scrollable legal copy to accept.
OTP verification
A dialog for entering a one-time verification code.
API reference
A modal dialog: a Trigger opens a portalled overlay + centered Content, with styled header/footer, title, description, and close.
Full props on Base UI DialogAnatomy
Dialog | Root managing the dialog's open state. |
DialogClose | Button that closes the dialog. |
DialogContent | Portalled, centered popup with an optional close button. |
DialogDescription | Muted supporting text under the title. |
DialogFooter | Styled footer row for actions. |
DialogHeader | Styled div stacking the title and description. |
DialogOverlay | Fixed dimmed backdrop behind the dialog. |
DialogPortal | Renders the dialog outside the DOM tree. |
DialogTitle | Styled heading text for the dialog. |
DialogTrigger | Element that opens the dialog on click. |