Alert Dialog

A modal dialog that interrupts the user with important content and expects a response. Uses native Alert.alert() on iOS/Android and a styled Radix UI dialog on web.

Installation

npm
yarn
pnpm
bun
npm install @radix-ui/react-alert-dialog
Copy

Usage

import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog";
Copy

Examples

Basic Dialog

A simple alert dialog with a title, description, and action buttons.

Basic Alert
View Code
Copy

Destructive Action

Use AlertDialogDestructive for dangerous actions like delete operations.

Destructive Action
View Code
Copy

With Callbacks

Handle user actions with callback functions.

With Callbacks
View Code
Copy

Prompt with Input

Add AlertDialogInput to collect text input from the user. On iOS, this uses the native Alert.prompt() API.

Prompt Dialog
View Code
Copy

Secure Input (Password)

Use type="secure-text" for password inputs.

Secure Input
View Code
Copy

API Reference

AlertDialog

The root component that provides context for the dialog.

Prop
Type
Default
Description
open
boolean
-
Controlled open state
onOpenChange
(open: boolean) => void
-
Callback when open state changes
children*
ReactNode
-
Dialog content

AlertDialogTrigger

The button that opens the dialog.

Prop
Type
Default
Description
asChild
boolean
false
Merge props onto child element
className
string
-
CSS classes for styling
children*
ReactNode
-
Trigger content

AlertDialogContent

Container for the dialog content.

Prop
Type
Default
Description
className
string
-
CSS classes for styling (web only)
children*
ReactNode
-
Dialog content

AlertDialogInput

Text input field for prompt dialogs.

Prop
Type
Default
Description
type
"plain-text" | "secure-text" | "login-password"
"plain-text"
Input type
defaultValue
string
-
Initial value
placeholder
string
-
Placeholder text (web only)
keyboardType
KeyboardTypeOptions
-
Keyboard type (native only)
className
string
-
CSS classes for styling (web only)

AlertDialogAction

Primary action button.

Prop
Type
Default
Description
onPress
(value?: string) => void
-
Callback when pressed. Receives input value if AlertDialogInput is present.
className
string
-
CSS classes for styling (web only)
children*
ReactNode
-
Button text

AlertDialogCancel

Cancel/dismiss button.

Prop
Type
Default
Description
onPress
(value?: string) => void
-
Callback when pressed
className
string
-
CSS classes for styling (web only)
children*
ReactNode
-
Button text

AlertDialogDestructive

Destructive action button (styled in red).

Prop
Type
Default
Description
onPress
(value?: string) => void
-
Callback when pressed
className
string
-
CSS classes for styling (web only)
children*
ReactNode
-
Button text

Platform Differences

Native (iOS/Android)

  • Uses React Native's Alert.alert() API
  • When AlertDialogInput is present, uses Alert.prompt() on iOS
  • Button styles (cancel, destructive, default) are rendered natively
  • className props on content components have no effect
  • Dialog appears as a native system alert

Web

  • Uses Radix UI's AlertDialog primitives
  • Renders a styled modal with backdrop
  • Full support for className styling
  • AlertDialogInput renders as a styled HTML input
  • Supports animations via Tailwind CSS

Accessibility

  • On web, the dialog traps focus and can be dismissed with Escape
  • Screen readers announce the dialog title and description
  • Action buttons are properly labeled
  • Native alerts inherit platform accessibility features