Dialogs
Dialogs (COMPONENT_SPEC §29) ask for a decision or show critical information in front of the page. The alert dialog is Compose's AlertDialog: an optional icon, a headline, supporting text and up to two text buttons in a 280–560dp surface-container-high surface with extra-large corners and no shadow. Custom content is Compose's BasicAlertDialog: your own surface, sized the same. The full-screen dialog comes from m3.material.io (Compose has none at the pinned version): below 600dp it fills the window with a 56dp header; from 600dp it is laid out as a basic dialog.
Each is a native <dialog> opened with showModal(): the rest of the page is inert, Tab cycles inside the dialog, focus starts on its first control and returns to the button that opened it. Escape, a press on the 32% scrim and the full-screen close button ask to close (the app may refuse, as Compose's onDismissRequest). The alert dialog has the alertdialog role (m3.material.io's web guidance) and is named by its headline. The scrim fades on the default effects spring; the dialog slides in and its surface grows from the top as in Material Web, with fades only under reduced motion.
Alert dialog (element)
<m3e-dialog headline icon>: the text is the content, children with slot="actions" are the buttons (the dismiss button first; the confirm button ends the row and tops the stack when they do not fit). The first two are the Compose samples.
Paragraph 1. Location services let apps use your device's location to show nearby places, give directions and tag photos. You can turn them off at any time in settings.
Paragraph 2. Location services let apps use your device's location to show nearby places, give directions and tag photos. You can turn them off at any time in settings.
Paragraph 3. Location services let apps use your device's location to show nearby places, give directions and tag photos. You can turn them off at any time in settings.
Paragraph 4. Location services let apps use your device's location to show nearby places, give directions and tag photos. You can turn them off at any time in settings.
Paragraph 5. Location services let apps use your device's location to show nearby places, give directions and tag photos. You can turn them off at any time in settings.
Paragraph 6. Location services let apps use your device's location to show nearby places, give directions and tag photos. You can turn them off at any time in settings.
Paragraph 7. Location services let apps use your device's location to show nearby places, give directions and tag photos. You can turn them off at any time in settings.
Paragraph 8. Location services let apps use your device's location to show nearby places, give directions and tag photos. You can turn them off at any time in settings.
Paragraph 9. Location services let apps use your device's location to show nearby places, give directions and tag photos. You can turn them off at any time in settings.
Paragraph 10. Location services let apps use your device's location to show nearby places, give directions and tag photos. You can turn them off at any time in settings.
Paragraph 11. Location services let apps use your device's location to show nearby places, give directions and tag photos. You can turn them off at any time in settings.
Paragraph 12. Location services let apps use your device's location to show nearby places, give directions and tag photos. You can turn them off at any time in settings.
This area typically contains the supportive text which presents the details regarding the Dialog's purpose.
Full-screen dialog (element)
<m3e-dialog variant="full-screen" headline close-label>: a close button and the headline in the header, the confirming action (slot="actions") at its end. While the content scrolls, the header takes surface-container. Narrow the window below 600px to see the full-screen layout.
Paragraph 1. Location services let apps use your device's location to show nearby places, give directions and tag photos. You can turn them off at any time in settings.
Paragraph 2. Location services let apps use your device's location to show nearby places, give directions and tag photos. You can turn them off at any time in settings.
Paragraph 3. Location services let apps use your device's location to show nearby places, give directions and tag photos. You can turn them off at any time in settings.
Paragraph 4. Location services let apps use your device's location to show nearby places, give directions and tag photos. You can turn them off at any time in settings.
Paragraph 5. Location services let apps use your device's location to show nearby places, give directions and tag photos. You can turn them off at any time in settings.
Paragraph 6. Location services let apps use your device's location to show nearby places, give directions and tag photos. You can turn them off at any time in settings.
Paragraph 7. Location services let apps use your device's location to show nearby places, give directions and tag photos. You can turn them off at any time in settings.
Paragraph 8. Location services let apps use your device's location to show nearby places, give directions and tag photos. You can turn them off at any time in settings.
Paragraph 9. Location services let apps use your device's location to show nearby places, give directions and tag photos. You can turn them off at any time in settings.
Paragraph 10. Location services let apps use your device's location to show nearby places, give directions and tag photos. You can turn them off at any time in settings.
Paragraph 11. Location services let apps use your device's location to show nearby places, give directions and tag photos. You can turn them off at any time in settings.
Paragraph 12. Location services let apps use your device's location to show nearby places, give directions and tag photos. You can turn them off at any time in settings.
React
<AlertDialog isOpen onOpenChange headline icon dismissButton confirmButton>, <BasicAlertDialog> and <FullScreenDialog headline action closeLabel> render the same DOM as the element. onOpenChange(false) reports Escape, the scrim and the close button; a controlled dialog stays open until isOpen is false.
Sources
androidx Compose Material3 1.5.0-beta01 (19991f2c): DialogTokens.kt as read by AlertDialog.kt (AlertDialogDefaults L194–234, AlertDialogContent L308–313, the 280–560dp width L409–412, the 24dp padding L229–233, the icon and title padding L419–420, the buttons L366–401 and L414–417), AndroidAlertDialog.android.kt, AlertDialogSamples.kt, ScrimTokens.kt, Button.kt (ButtonDefaults.MinHeight), material3 res strings.xml (L21, "Dialog") and compose/ui res styles.xml; the scrim fade of ModalBottomSheet.kt (L146–151); the values in components/dialog-defaults.css (lines in PARITY.md).
Material Web 2.5.0 (a secondary source): dialog/internal/animations.js and internal/motion/animation.js for the open and close motion (SOURCES register #72, DECISIONS D19 (11)), on androidx's emphasized easing (tokens/MotionTokens.kt L40, DECISIONS D20 (6)); dialog/internal/_dialog.scss L39–40 for the 24px window margin (#73, D19 (12)). m3.material.io Dialogs (Specs, Guidelines, Accessibility; token DB md.comp.dialog and md.comp.full-screen-dialog, TOKEN_TABLE.0b1e39a67d5bafdc) for the alert dialog role and the full-screen dialog (its surface colors: #74, D19 (13)). SOURCES register #46.