Dialog

Dialog is flexible for general content display (forms, details, media), while Alert Dialog is specifically for critical confirmations requiring user response. Use Dialog for most modal needs and Alert Dialog only for important, destructive, or irreversible actions.

Yes! Dialogs are perfect for forms like "Create New Item", "Edit Profile", or "Contact Us". The dialog maintains focus, validation works normally, and you can control when the dialog closes based on form submission success or cancellation.

You can prevent backdrop clicks or escape key from closing the dialog, useful when users must complete an action. However, always provide a visible close button or cancel action to avoid trapping users unintentionally.

Yes, Dialog supports nesting for complex multi-step workflows. For example, a "Create Project" dialog might open a "Select Template" dialog. Each dialog maintains its own focus trap and handles stacking order appropriately.

Absolutely. Dialogs adapt to screen size, typically appearing centered on desktop but often full-screen or bottom-sheet style on mobile for better usability on small screens where space is limited.

Yes, this Figma Dialog component matches the shadcn/ui implementation exactly, ensuring consistent modal experiences from design to production with proper focus management and accessibility.