Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Features

  • Focus is automatically trapped.
  • Can be controlled or uncontrolled.
  • Manages screen reader announcements with Title and Description components.
  • Esc closes the component automatically.

Install the component from your command line.

npm install @radix-ui/react-alert-dialog

Import the components and piece the parts together.

import * as AlertDialog from '@radix-ui/react-alert-dialog';
export default () => (
<AlertDialog.Root>
<AlertDialog.Trigger />
<AlertDialog.Overlay />
<AlertDialog.Content>
<AlertDialog.Title />
<AlertDialog.Description />
<AlertDialog.Cancel />
<AlertDialog.Action />
</AlertDialog.Content>
</AlertDialog.Root>
);

Create your styled alert dialog component from the primitive parts.

import { styled } from 'path-to/stitches.config';
import * as AlertDialog from '@radix-ui/react-alert-dialog';
const StyledOverlay = styled(AlertDialog.Overlay, {
backgroundColor: 'rgba(0, 0, 0, .15)',
position: 'fixed',
top: 0,
right: 0,
bottom: 0,
left: 0,
});
const StyledContent = styled(AlertDialog.Content, {
position: 'fixed',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 360,
backgroundColor: 'white',
borderRadius: 6,
padding: 20,
});
export default () => (
<AlertDialog.Root>
<AlertDialog.Trigger>Open</AlertDialog.Trigger>
<StyledOverlay />
<StyledContent>
<AlertDialog.Title>Alert title</AlertDialog.Title>
<AlertDialog.Description>
Alert description.
</AlertDialog.Description>
<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
<AlertDialog.Action>Accept</AlertDialog.Action>
</StyledContent>
</AlertDialog.Root>
);

Contains all the parts of an alert dialog.

PropTypeDefault
defaultOpenbooleanNo default value
openbooleanNo default value
onOpenChangefunctionNo default value
idstringNo default value

A button that opens the dialog.

PropTypeDefault
asenumbutton

A layer that covers the inert portion of the view when the dialog is open.

PropTypeDefault
asenumdiv
forceMountbooleanNo default value

Contains content to be rendered when the dialog is open.

PropTypeDefault
asenumdiv
forceMountbooleanNo default value
onOpenAutoFocusfunctionNo default value
onCloseAutoFocusfunctionNo default value
onEscapeKeyDownfunctionNo default value
onPointerDownOutsidefunctionNo default value

A button that closes the dialog. This button should be distinguished visually from AlertDialog.Action buttons.

PropTypeDefault
asenumbutton

A button that closes the dialog. These buttons should be distinguished visually from the AlertDialog.Cancel button.

PropTypeDefault
asenumbutton

An accessible name to be announced when the dialog is opened. Alternatively, you can provide aria-label or aria-labelledby to AlertDialog.Content and exclude this component.

PropTypeDefault
asenumh2

An accessible description to be announced when the dialog is opened. Alternatively, you can provide aria-describedby to AlertDialog.Content and exclude this component.

PropTypeDefault
asenump

Adheres to the Alert and Message Dialogs WAI-ARIA design pattern.

KeyDescription
SpaceOpens/closes the dialog.
EnterOpens/closes the dialog.
TabMoves focus to the next focusable element.
Shift + TabMoves focus to the previous focusable element.
EscCloses the dialog and moves focus to AlertDialog.Trigger.

Create your own API by abstracting the primitive parts into your own component.

This example abstracts the AlertDialog.Overlay part and prevents the dialog from closing when clicking outside, or when pressing ESC.

Usage

import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogCancel, AlertDialogAction, } from './your-alert-dialog';
export default () => (
<AlertDialog>
<AlertDialogTrigger>AlertDialog trigger</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogTitle>AlertDialog title</AlertDialogTitle>
<AlertDialogDescription>
AlertDialog description
</AlertDialogDescription>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction>Action</AlertDialogAction>
</AlertDialogContent>
</AlertDialog>
);

Implementation

// your-alert-dialog.js
import React from 'react';
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
export function AlertDialog({ children, ...props }) {
return (
<AlertDialogPrimitive.Root {...props}>
<AlertDialogPrimitive.Overlay />
{children}
</AlertDialogPrimitive.Root>
);
}
export const AlertDialogContent = React.forwardRef(
({ children, ...props }, forwardedRef) => (
<AlertDialogPrimitive.Content
{...props}
ref={forwardedRef}
// Don't close the Alert Dialog when pressing ESC
onEscapeKeyDown={(event) => event.preventDefault()}
// Don't close the Alert Dialog when clicking outside
onPointerDownOutside={(event) => event.preventDefault()}
>
{children}
</>
)
);
export const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
export const AlertDialogTitle = AlertDialogPrimitive.Title;
export const AlertDialogDescription =
AlertDialogPrimitive.Description;
export const AlertDialogCancel = AlertDialogPrimitive.Cancel;
export const AlertDialogAction = AlertDialogPrimitive.Action;