Alert Dialog

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

Loading component...

"use client"import * as React from "react"import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"import { cn } from "@/lib/utils"import { buttonVariants } from "@/components/ui/button"function AlertDialog({  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />}function AlertDialogTrigger({  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {  return (    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />  )}function AlertDialogPortal({  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {  return (    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />  )}function AlertDialogOverlay({  className,  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {  return (    <AlertDialogPrimitive.Overlay      data-slot="alert-dialog-overlay"      className={cn(        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",        className      )}      {...props}    />  )}function AlertDialogContent({  className,  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {  return (    <AlertDialogPortal>      <AlertDialogOverlay />      <AlertDialogPrimitive.Content        data-slot="alert-dialog-content"        className={cn(          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",          className        )}        {...props}      />    </AlertDialogPortal>  )}function AlertDialogHeader({  className,  ...props}: React.ComponentProps<"div">) {  return (    <div      data-slot="alert-dialog-header"      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}      {...props}    />  )}function AlertDialogFooter({  className,  ...props}: React.ComponentProps<"div">) {  return (    <div      data-slot="alert-dialog-footer"      className={cn(        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",        className      )}      {...props}    />  )}function AlertDialogTitle({  className,  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {  return (    <AlertDialogPrimitive.Title      data-slot="alert-dialog-title"      className={cn("text-lg font-semibold", className)}      {...props}    />  )}function AlertDialogDescription({  className,  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {  return (    <AlertDialogPrimitive.Description      data-slot="alert-dialog-description"      className={cn("text-muted-foreground text-sm", className)}      {...props}    />  )}function AlertDialogAction({  className,  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {  return (    <AlertDialogPrimitive.Action      className={cn(buttonVariants(), className)}      {...props}    />  )}function AlertDialogCancel({  className,  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {  return (    <AlertDialogPrimitive.Cancel      className={cn(buttonVariants({ variant: "outline" }), className)}      {...props}    />  )}export {  AlertDialog,  AlertDialogPortal,  AlertDialogOverlay,  AlertDialogTrigger,  AlertDialogContent,  AlertDialogHeader,  AlertDialogFooter,  AlertDialogTitle,  AlertDialogDescription,  AlertDialogAction,  AlertDialogCancel,}

Installation

npx shadcn@latest add alert-dialog

Usage

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

export function AlertDialogDemo() {
  return (
    <AlertDialog>
      <AlertDialogTrigger>Open</AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone. This will permanently delete your account
            and remove your data from our servers.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Continue</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

API Reference

AlertDialog

The root component that manages dialog state and behavior.

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`false`	The open state of the dialog when initially rendered.
`open`	`boolean`	-	The controlled open state of the dialog.
`onOpenChange`	`(open: boolean) => void`	-	Event handler called when the open state changes.
`children`	`React.ReactNode`	-	The dialog trigger and content components.

AlertDialogTrigger

The element that opens the dialog when interacted with.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Merge props onto child element instead of creating a button.
`children`	`React.ReactNode`	-	The trigger element or component.

AlertDialogContent

The container for the dialog's content.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for styling.
`onEscapeKeyDown`	`(event: KeyboardEvent) => void`	-	Handler called when Escape key is pressed.
`onPointerDownOutside`	`(event: PointerDownOutsideEvent) => void`	-	Handler for clicks outside the dialog.

AlertDialogHeader

Container for the dialog's title and description.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for styling.
`children`	`React.ReactNode`	-	Title and description components.

AlertDialogTitle

The dialog's main heading.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for styling.
`children`	`React.ReactNode`	-	The title text content.

AlertDialogDescription

Descriptive text providing context about the dialog's purpose.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for styling.
`children`	`React.ReactNode`	-	The description text content.

AlertDialogFooter

Container for action buttons.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for styling.
`children`	`React.ReactNode`	-	Action and cancel buttons.

AlertDialogAction

The primary action button that confirms the dialog.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for styling.
`onClick`	`(event: MouseEvent) => void`	-	Handler for action confirmation.
`children`	`React.ReactNode`	-	Button text content.

AlertDialogCancel

The cancel button that dismisses the dialog without action.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for styling.
`onClick`	`(event: MouseEvent) => void`	-	Handler for cancellation.
`children`	`React.ReactNode`	-	Button text content.

Implementation Details

Architecture

Built on Radix UI's AlertDialog primitive with custom styling:

Portal Rendering: Content renders in a React Portal at document root
Focus Management: Automatically traps focus within dialog when open
Overlay: Semi-transparent backdrop blocks interaction with page content
Animation: Smooth fade and zoom transitions using Tailwind animations

Component Structure

<AlertDialog>
  <AlertDialogTrigger />      // Opens the dialog
  <AlertDialogPortal>         // Portal container (rendered automatically)
    <AlertDialogOverlay />    // Background overlay (rendered automatically)
    <AlertDialogContent>      // Main dialog container
      <AlertDialogHeader>
        <AlertDialogTitle />
        <AlertDialogDescription />
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel />
        <AlertDialogAction />
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialogPortal>
</AlertDialog>

Styling System

Overlay: 50% black opacity with fade animation
Content: Centered modal with max width constraints
Responsive: Stack buttons vertically on mobile, horizontally on desktop
Animations: Data-driven state animations for smooth transitions

Accessibility

Follows WAI-ARIA Alert Dialog pattern for maximum accessibility:

Key	Action
`Enter`	Activates focused button
`Space`	Activates focused button
`Tab`	Moves focus to next interactive element
`Shift + Tab`	Moves focus to previous interactive element
`Escape`	Closes dialog (can be prevented)

ARIA Attributes

role="alertdialog": Identifies critical user interaction
aria-modal="true": Indicates modal behavior
aria-labelledby: Links title to dialog
aria-describedby: Links description to dialog
Focus trap prevents tabbing outside dialog

Title announced when dialog opens
Description provides context
Button labels clearly indicate actions
Focus management guides user flow

Examples

Destructive Action

Loading component...

"use client"import * as React from "react"import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"import { cn } from "@/lib/utils"import { buttonVariants } from "@/components/ui/button"function AlertDialog({  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />}function AlertDialogTrigger({  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {  return (    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />  )}function AlertDialogPortal({  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {  return (    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />  )}function AlertDialogOverlay({  className,  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {  return (    <AlertDialogPrimitive.Overlay      data-slot="alert-dialog-overlay"      className={cn(        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",        className      )}      {...props}    />  )}function AlertDialogContent({  className,  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {  return (    <AlertDialogPortal>      <AlertDialogOverlay />      <AlertDialogPrimitive.Content        data-slot="alert-dialog-content"        className={cn(          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",          className        )}        {...props}      />    </AlertDialogPortal>  )}function AlertDialogHeader({  className,  ...props}: React.ComponentProps<"div">) {  return (    <div      data-slot="alert-dialog-header"      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}      {...props}    />  )}function AlertDialogFooter({  className,  ...props}: React.ComponentProps<"div">) {  return (    <div      data-slot="alert-dialog-footer"      className={cn(        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",        className      )}      {...props}    />  )}function AlertDialogTitle({  className,  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {  return (    <AlertDialogPrimitive.Title      data-slot="alert-dialog-title"      className={cn("text-lg font-semibold", className)}      {...props}    />  )}function AlertDialogDescription({  className,  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {  return (    <AlertDialogPrimitive.Description      data-slot="alert-dialog-description"      className={cn("text-muted-foreground text-sm", className)}      {...props}    />  )}function AlertDialogAction({  className,  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {  return (    <AlertDialogPrimitive.Action      className={cn(buttonVariants(), className)}      {...props}    />  )}function AlertDialogCancel({  className,  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {  return (    <AlertDialogPrimitive.Cancel      className={cn(buttonVariants({ variant: "outline" }), className)}      {...props}    />  )}export {  AlertDialog,  AlertDialogPortal,  AlertDialogOverlay,  AlertDialogTrigger,  AlertDialogContent,  AlertDialogHeader,  AlertDialogFooter,  AlertDialogTitle,  AlertDialogDescription,  AlertDialogAction,  AlertDialogCancel,}

Async Actions

Loading component...

"use client"import * as React from "react"import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"import { cn } from "@/lib/utils"import { buttonVariants } from "@/components/ui/button"function AlertDialog({  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />}function AlertDialogTrigger({  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {  return (    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />  )}function AlertDialogPortal({  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {  return (    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />  )}function AlertDialogOverlay({  className,  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {  return (    <AlertDialogPrimitive.Overlay      data-slot="alert-dialog-overlay"      className={cn(        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",        className      )}      {...props}    />  )}function AlertDialogContent({  className,  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {  return (    <AlertDialogPortal>      <AlertDialogOverlay />      <AlertDialogPrimitive.Content        data-slot="alert-dialog-content"        className={cn(          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",          className        )}        {...props}      />    </AlertDialogPortal>  )}function AlertDialogHeader({  className,  ...props}: React.ComponentProps<"div">) {  return (    <div      data-slot="alert-dialog-header"      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}      {...props}    />  )}function AlertDialogFooter({  className,  ...props}: React.ComponentProps<"div">) {  return (    <div      data-slot="alert-dialog-footer"      className={cn(        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",        className      )}      {...props}    />  )}function AlertDialogTitle({  className,  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {  return (    <AlertDialogPrimitive.Title      data-slot="alert-dialog-title"      className={cn("text-lg font-semibold", className)}      {...props}    />  )}function AlertDialogDescription({  className,  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {  return (    <AlertDialogPrimitive.Description      data-slot="alert-dialog-description"      className={cn("text-muted-foreground text-sm", className)}      {...props}    />  )}function AlertDialogAction({  className,  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {  return (    <AlertDialogPrimitive.Action      className={cn(buttonVariants(), className)}      {...props}    />  )}function AlertDialogCancel({  className,  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {  return (    <AlertDialogPrimitive.Cancel      className={cn(buttonVariants({ variant: "outline" }), className)}      {...props}    />  )}export {  AlertDialog,  AlertDialogPortal,  AlertDialogOverlay,  AlertDialogTrigger,  AlertDialogContent,  AlertDialogHeader,  AlertDialogFooter,  AlertDialogTitle,  AlertDialogDescription,  AlertDialogAction,  AlertDialogCancel,}

Controlled State

Loading component...

"use client"import * as React from "react"import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"import { cn } from "@/lib/utils"import { buttonVariants } from "@/components/ui/button"function AlertDialog({  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />}function AlertDialogTrigger({  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {  return (    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />  )}function AlertDialogPortal({  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {  return (    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />  )}function AlertDialogOverlay({  className,  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {  return (    <AlertDialogPrimitive.Overlay      data-slot="alert-dialog-overlay"      className={cn(        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",        className      )}      {...props}    />  )}function AlertDialogContent({  className,  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {  return (    <AlertDialogPortal>      <AlertDialogOverlay />      <AlertDialogPrimitive.Content        data-slot="alert-dialog-content"        className={cn(          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",          className        )}        {...props}      />    </AlertDialogPortal>  )}function AlertDialogHeader({  className,  ...props}: React.ComponentProps<"div">) {  return (    <div      data-slot="alert-dialog-header"      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}      {...props}    />  )}function AlertDialogFooter({  className,  ...props}: React.ComponentProps<"div">) {  return (    <div      data-slot="alert-dialog-footer"      className={cn(        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",        className      )}      {...props}    />  )}function AlertDialogTitle({  className,  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {  return (    <AlertDialogPrimitive.Title      data-slot="alert-dialog-title"      className={cn("text-lg font-semibold", className)}      {...props}    />  )}function AlertDialogDescription({  className,  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {  return (    <AlertDialogPrimitive.Description      data-slot="alert-dialog-description"      className={cn("text-muted-foreground text-sm", className)}      {...props}    />  )}function AlertDialogAction({  className,  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {  return (    <AlertDialogPrimitive.Action      className={cn(buttonVariants(), className)}      {...props}    />  )}function AlertDialogCancel({  className,  ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {  return (    <AlertDialogPrimitive.Cancel      className={cn(buttonVariants({ variant: "outline" }), className)}      {...props}    />  )}export {  AlertDialog,  AlertDialogPortal,  AlertDialogOverlay,  AlertDialogTrigger,  AlertDialogContent,  AlertDialogHeader,  AlertDialogFooter,  AlertDialogTitle,  AlertDialogDescription,  AlertDialogAction,  AlertDialogCancel,}

Best Practices

Content Guidelines

Clear Titles: Use action-oriented questions or statements
Concise Descriptions: Explain consequences clearly
Actionable Buttons: Use verbs that describe the action
Destructive Actions: Always require confirmation for data loss

UX Considerations

Use for critical decisions requiring user confirmation
Avoid overuse - reserve for important actions
Provide clear consequences in the description
Offer a clear escape path with cancel option
Consider less intrusive alternatives for non-critical actions

Implementation Tips

Prevent accidental dismissal for critical actions
Handle loading states for async operations
Validate before closing on action confirmation
Consider keyboard-only users in custom implementations
Test with screen readers for accessibility

Customization

Styling Variants

// Warning variant
<AlertDialogContent className="border-yellow-200">
  <AlertDialogHeader>
    <AlertDialogTitle className="text-yellow-900">
      Warning
    </AlertDialogTitle>
    <AlertDialogDescription className="text-yellow-800">
      This action may have unintended consequences.
    </AlertDialogDescription>
  </AlertDialogHeader>
  {/* Footer */}
</AlertDialogContent>

Custom Animations

<AlertDialogContent className="data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom-4">
  {/* Content */}
</AlertDialogContent>

Size Variants

// Small dialog
<AlertDialogContent className="sm:max-w-sm">
  {/* Content */}
</AlertDialogContent>

// Large dialog
<AlertDialogContent className="sm:max-w-2xl">
  {/* Content */}
</AlertDialogContent>

SEO Considerations

While dialogs don't directly impact SEO, consider:

Progressive Enhancement: Ensure critical actions work without JavaScript
Semantic HTML: Proper heading hierarchy in content
Accessible Content: Clear, descriptive text for all users
Performance: Lazy load dialog content when appropriate

Installation

Usage

API Reference

AlertDialog

AlertDialogTrigger

AlertDialogContent

AlertDialogHeader

AlertDialogTitle

AlertDialogDescription

AlertDialogFooter

AlertDialogAction

AlertDialogCancel

Implementation Details

Architecture

Component Structure

Styling System

Accessibility

Keyboard Navigation

ARIA Attributes

Examples

Destructive Action

Async Actions

Controlled State

Best Practices

Content Guidelines

UX Considerations

Implementation Tips

Customization

Styling Variants

Custom Animations

Size Variants

SEO Considerations

On this page

Alert Dialog

Reactalert-dialog

Reactbutton

Reactalert-dialog

Reactbutton

Reactalert-dialog

Reactbutton

Reactalert-dialog

Reactbutton

On this page