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.

Installation

Install the component from your command line.

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

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

Anatomy

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>
);

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>
);

Basic example

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>
);

// 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>
);

API Reference

Root

Contains all the parts of an alert dialog.

Prop	Type	Default	Required
`defaultOpen`	`boolean`
`open`	`boolean`
`onOpenChange`	`function`
`id`	`string`

Trigger

A button that opens the dialog.

Prop	Type	Default	Required
`as`	`enum`	`button`

Overlay

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

Prop	Type	Default	Required
`as`	`enum`	`div`
`forceMount`	`boolean`

Content

Contains content to be rendered when the dialog is open.

Prop	Type	Default
`as`	`enum`	`div`
`forceMount`	`boolean`
`onOpenAutoFocus`	`function`
`onCloseAutoFocus`	`function`
`onEscapeKeyDown`	`function`
`onPointerDownOutside`	`function`

Cancel

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

Prop	Type	Default	Required
`as`	`enum`	`button`

Action

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

Prop	Type	Default	Required
`as`	`enum`	`button`

Title

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.

Prop	Type	Default	Required
`as`	`enum`	`h2`

Description

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

Prop	Type	Default	Required
`as`	`enum`	`p`

Accessibility

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

Keyboard Interactions

Key	Description
`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`.