Alert Dialog highlights and features
Alert Dialog automatically traps focus. It can be controlled or uncontrolled. It manages screen reader announcements with Title and Description components. Esc key closes the component automatically.
Radix Primitives · all subjects
alert-dialog
25 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Alert Dialog controlled example with async form submission
Example showing how to use controlled props to programmatically close the Alert Dialog after an async operation: const [open, setOpen] = React.useState(false); return (<AlertDialog.Root open={open} onOpenChange={setOpen}><AlertDialog.Trigger>Open</AlertDialog.Trigger><AlertDialog.Portal><AlertDialog.Overlay /><AlertDialog.Content><form onSubmit={(event) => { wait().then(() => setOpen(false)); event.preventDefault(); }}>{/* some inputs */}<button type="submit">Submit</button></form></AlertDialog.Content></AlertDialog.Portal></AlertDialog.Root>);
Alert Dialog custom portal container example
Example showing how to customize the element that the alert dialog portals into: const [container, setContainer] = React.useState(null); return (<div><AlertDialog.Root><AlertDialog.Trigger /><AlertDialog.Portal container={container}><AlertDialog.Overlay /><AlertDialog.Content>...</AlertDialog.Content></AlertDialog.Portal></AlertDialog.Root><div ref={setContainer} /></div>);
Alert Dialog definition and purpose
An Alert Dialog is a modal dialog that interrupts the user with important content and expects a response.
Alert Dialog Root props
Root has three props: defaultOpen (boolean, uncontrolled open state on initial render), open (boolean, controlled open state - must be used with onOpenChange), and onOpenChange ((open: boolean) => void, called when open state changes).
Alert Dialog Trigger props and data attributes
Trigger has asChild prop (boolean, default false, enables composition). Trigger has [data-state] attribute with values 'open' or 'closed'.
Alert Dialog Portal props
Portal has two props: forceMount (boolean, forces mounting when more control needed for animation libraries, inherited by Overlay and Content), and container (HTMLElement, default document.body, specifies container element to portal into).
Alert Dialog Overlay props and data attributes
Overlay has asChild prop (boolean, default false, enables composition) and forceMount prop (boolean, inherits from Portal). Overlay has [data-state] attribute with values 'open' or 'closed'.
Alert Dialog Content props and data attributes
Content has five props: asChild (boolean, default false, enables composition), forceMount (boolean, inherits from Portal), onOpenAutoFocus ((event: Event) => void, called when focus moves to destructive action after opening, preventable), onCloseAutoFocus ((event: Event) => void, called when focus moves to trigger after closing, preventable), and onEscapeKeyDown ((event: KeyboardEvent) => void, called when escape key is down, preventable). Content has [data-state] attribute with values 'open' or 'closed'.
Alert Dialog Cancel and Action props
Both Cancel and Action buttons have asChild prop (boolean, default false, enables composition).
Alert Dialog Title accessibility
Title component provides an accessible name announced when the dialog opens. Alternatively, you can provide aria-label or aria-labelledby to AlertDialog.Content and exclude the Title component. Title has asChild prop (boolean, default false, enables composition).
Alert Dialog Description accessibility
Description component provides an accessible description announced when the dialog opens. Alternatively, you can provide aria-describedby to AlertDialog.Content and exclude the Description component. Description has asChild prop (boolean, default false, enables composition).
Alert Dialog keyboard interactions
Space opens/closes the dialog. Enter opens/closes the dialog. Tab moves focus to the next focusable element. Shift+Tab moves focus to the previous focusable element. Esc closes the dialog and moves focus to AlertDialog.Trigger.
Alert Dialog pointerdown click outside
Fix pointer-events issue when clicking outside Alert Dialog.
Alert Dialog allowPinchZoom trackpad
Fix allowPinchZoom bug for trackpad users in Alert Dialog.
Alert Dialog textarea scrollable Firefox
Fix issue with textarea elements not being scrollable in Firefox within Alert Dialog.
AlertDialog.Portal added for portalling behavior
AlertDialog now has a Portal part. To avoid regressions, this part should be used if portalling behavior is desired. Note that z-index is no longer managed, providing full control of layering.
AlertDialog allowPinchZoom prop removed, defaults to true
The allowPinchZoom prop was removed from AlertDialog.Root as it now defaults to true.
Alert Dialog is a modal confirmation dialog
Alert Dialog is a modal confirmation dialog that interrupts the user and expects a response.
Alert Dialog components and parts
Alert Dialog is composed of the following parts: Root (contains all parts of the dialog), Trigger (wraps the control that opens the dialog), Content (contains the dialog content, based on div element), Title (accessible title announced when dialog opens, based on Heading component with pre-defined font size and leading trim on top), Description (optional accessible description announced when dialog opens, based on Text component with pre-defined font size), Action (wraps the control that closes the dialog and should be visually distinguished from Cancel), and Cancel (wraps the control that closes the dialog and should be visually distinguished from Action).
Alert Dialog inherits from primitives and resembles Dialog
Alert Dialog inherits parts and props from the Alert Dialog primitive and is visually identical to Dialog, though with differing semantics and behavior.
Alert Dialog size prop affects padding and border-radius
The size prop on Content controls the size of the dialog and affects the padding and border-radius. It should be used in conjunction with width, minWidth, and maxWidth props to control the width of the dialog.
Alert Dialog size prop values
The size prop accepts values 1, 2, 3, and 4.
Alert Dialog with Inset content example
Content can be aligned flush with the sides of the dialog using the Inset component.
Alert Dialog Action and Cancel should be visually distinguished
The Action control that closes the dialog should be distinguished visually from the Cancel control that also closes the dialog.