Components

Dialog

A modal window over the page that holds focus for one task or decision.

28 October 2026

Added

First version: a modal window on Base UI Dialog.
title (required), description, children, footer, trigger, size, dismissible, open, defaultOpen, onOpenChange, initialFocus, closeLabel; Dialog.Close.
An overflowing body is keyboard-scrollable; bottom-sheet layout below 640 px.
motion.dialog and motion.scrim enter and exit.
dialog-width-sm|md|lg, dialog-radius, dialog-padding, dialog-margin component tokens; ui.dialog.close library string.
The part prop types are exported: DialogCloseProps.
size="xl" (960 px, dialog-width-xl) and size="full".
The parts API: Dialog.Root, Dialog.Popup, Dialog.Header, Dialog.Title, Dialog.Description, Dialog.Body, Dialog.Footer.
Glass material: under a glass Provider this surface turns glass; material="solid" keeps it solid.

Changed

The panel takes the border-overlay hairline and the shadow-overlay shadow; corner radius is 14 px. The action band is on surface-layer-1.
Padding is 24 px from 640 px up (dialog-padding-sm 16 px, dialog-padding-md 24 px; dialog-padding is removed). The backdrop is 32 % black in light mode and 48 % in dark; its blur turns off with the solid preference, more contrast, forced colours or reduced transparency.