Shadcn Alert Dialog

React alert dialog for confirmation modals and destructive actions. Built with TypeScript and Tailwind CSS for Next.js applications with focus management.

Alert modal issues?

Join our Discord community for help from other developers.

Ever watched a user accidentally delete months of work with a single click? Yeah, that sick feeling in your stomach is exactly why alert dialogs exist. This shadcn/ui alert dialog component stops users in their tracks before they do something they can't undo in your Next.js application.

Confirmation dialog

Standard confirmation dialog with cancel and continue options:

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,}

Built on Radix UI AlertDialog with focus trapping, keyboard navigation, and full accessibility support. Works perfectly with TypeScript and styled with Tailwind CSS classes.

npx shadcn@latest add alert-dialog

Why alert dialogs actually work

Here's the thing—alert dialogs aren't just annoying popups. They're psychological speed bumps that save your users (and your reputation) from disasters.

Think about it: your brain operates on autopilot most of the time. You click, tap, and swipe without thinking. Alert dialogs snap users out of autopilot mode by forcing them to read, process, and make a deliberate choice.

The magic happens in those few seconds of interruption. Users suddenly realize what they're about to do, and most importantly, they get a clear way out. That's not just good UX—that's respecting your users' intent and protecting their data.

This React component handles all the tricky parts: focus management, keyboard navigation, and accessibility. No wrestling with JavaScript event handling or screen reader compatibility.

Common alert dialog patterns you'll use

Destructive confirmation

Confirmation for dangerous actions like deletion using Button variants:

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 operations

Keep the dialog open during async operations with loading states and disabled buttons:

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,}

Each pattern serves different use cases in your React applications. Whether you're building with Next.js or vanilla JavaScript, these alert dialog patterns handle the complex state management and accessibility requirements.

Features

This free open source alert dialog component includes everything you need:

Focus trapping - Keyboard focus stays within the dialog until dismissed
TypeScript native - Built with TypeScript, works perfectly in JavaScript projects
Accessibility first - Full screen reader support and ARIA compliance
Tailwind CSS styling - Easy customization with utility classes
Radix UI foundation - Battle-tested primitives for modal behavior
Keyboard navigation - Space, Enter, Escape, and Tab all work as expected

API Reference

AlertDialog

The root component that manages dialog state and focus.

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`false`	Initial open state for uncontrolled usage
`open`	`boolean`	-	Controlled open state
`onOpenChange`	`(open: boolean) => void`	-	Callback when open state changes
`children`	`React.ReactNode`	-	Dialog components (trigger, content)

AlertDialogTrigger

The button that opens the dialog.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as child component using Radix UI Slot
`className`	`string`	-	Additional CSS classes for styling
`children`	`React.ReactNode`	-	Trigger content (usually a button)

AlertDialogContent

The modal container with focus management and animations.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for styling
`onOpenAutoFocus`	`(event: Event) => void`	-	Custom focus behavior when opening
`onCloseAutoFocus`	`(event: Event) => void`	-	Custom focus behavior when closing
`onEscapeKeyDown`	`(event: KeyboardEvent) => void`	-	Handle Escape key presses
`children`	`React.ReactNode`	-	Dialog content (header, footer)

AlertDialogHeader

Container for title and description with proper spacing.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for styling
`children`	`React.ReactNode`	-	Header content (title, description)

AlertDialogTitle

The dialog title announced to screen readers.

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

AlertDialogDescription

Additional context about the action and its consequences.

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

AlertDialogFooter

Container for action buttons with proper alignment.

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

AlertDialogCancel

The cancel button that dismisses the dialog without action.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as child component using Radix UI Slot
`className`	`string`	-	Additional CSS classes for styling
`children`	`React.ReactNode`	-	Button text content

AlertDialogAction

The confirm button that performs the action and closes the dialog.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as child component using Radix UI Slot
`className`	`string`	-	Additional CSS classes for styling
`children`	`React.ReactNode`	-	Button text content

Key	Action
`Space`/`Enter`	Opens dialog (when trigger focused)
`Escape`	Closes dialog and returns focus to trigger
`Tab`	Moves focus to next focusable element
`Shift + Tab`	Moves focus to previous focusable element

Accessibility Features

Feature	Description
Focus trapping	Focus stays within dialog until closed
Focus restoration	Returns focus to trigger after closing
ARIA attributes	Proper roles, labels, and descriptions
Screen reader support	Title and description announced when opened
Keyboard navigation	Full keyboard accessibility

Production tips

Use alert dialogs sparingly. This free shadcn/ui component works best for truly destructive or irreversible actions. For simple confirmations, consider inline validation or Toast notifications instead.

Button hierarchy matters. Use Button variants to make dangerous actions visually distinct—destructive red buttons for deletion, default styling for safe actions.

Form integration works smoothly. You can trigger alert dialogs from Form validation or Input field changes. Just remember that the dialog will interrupt the form flow.

Test keyboard navigation thoroughly. This open source component handles Tab, Enter, and Escape automatically, but custom trigger buttons need testing.

Consider mobile experience. Alert dialogs work on touch devices, but make sure your button targets are large enough (44px minimum) and text is readable.

Integration with other components

Alert dialogs work great with Form validation workflows and Button actions throughout your React applications. Use them alongside Dialog components for different types of user interactions—alerts for confirmations, dialogs for complex input.

Shadcn Alert Dialog

Confirmation dialog

Why alert dialogs actually work

Common alert dialog patterns you'll use

Destructive confirmation

Async operations

Features

API Reference

AlertDialog

AlertDialogTrigger

AlertDialogContent

AlertDialogHeader

AlertDialogTitle

AlertDialogDescription

AlertDialogFooter

AlertDialogCancel

AlertDialogAction

Keyboard Navigation

Accessibility Features

Production tips

Integration with other components

Questions you might have

On this page

Shadcn Alert Dialog

Reactalert-dialog

Reactbutton

Reactalert-dialog

Reactbutton

Reactalert-dialog

Reactbutton

When should I use Alert Dialog vs regular Dialog?

How do I handle async operations during confirmation?

Best practices for destructive action confirmations?

Can I customize the styling and animations?

How do I integrate with form validation?

What about mobile UX considerations?

How do I test accessibility properly?

On this page