DesignUX Guidelines
Mobile Overlay Rules
Use three overlay buckets on mobile:
- Keep compact alerts for short confirm or cancel decisions with no meaningful input.
- Use responsive bottom sheets for pickers, selectors, and lightweight forms with stable bottom actions when confirmation is required.
- Use full-height mobile overlays for longer forms, typed confirmations, file handling, or device-heavy tasks.
Implementation rules:
- Use
ResponsiveDialogfor non-destructive editing and selection flows. - Use
mobileVariant="sheet"for tall bottom sheets. - Use
mobileVariant="full-height"for longer mobile tasks. - Keep
AlertDialogseparate for desktop destructive confirmations. - Do not convert immersive media or scanner experiences into shallow sheets.