Dialog
A modal dialog component for displaying content in an overlay with focus management.
The Dialog component displays content in a modal overlay, centered on the screen.
Default Dialog
Confirmation
Form Dialog
Guidelines
Dialogs should be used for:
- Confirming critical actions that require user attention
- Displaying important alerts or notifications
Always provide a clear way to close the dialog and ensure the primary action is obvious.
Accessibility
- The dialog has proper focus management, focus moves to the dialog when opened and returns to the trigger element when closed
- The dialog is marked with appropriate ARIA attributes (
role="dialog"orrole="alertdialog") - Color should never used to communicate important information