Skip to content

shadcn.io is an independent project built on shadcn/ui

Components

Free

Alert Dialog for Radix UI

Stop the page until the reader confirms or cancels a destructive step. For React with Radix UI, when a click outside should not skip the choice.

A modal that asks the reader to cancel or continue.

Use it to confirm a destructive step, like deleting an account. A form, or anything they have to fill in, belongs in a Dialog. In React, Radix UI doesn't close it on an outside click.

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Alert Dialog anatomy: content, title, description, cancel, action
AlertDialogTrigger
AlertDialogOverlay
AlertDialogContent
└── AlertDialogPositioner
AlertDialogTitle
AlertDialogDescription
AlertDialogAction

Usage

import {
  AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
  AlertDialogDescription, AlertDialogFooter, AlertDialogHeader,
  AlertDialogTitle, AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">Show Dialog</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your
        account from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Accessibility

Enter
When focus is on the trigger, opens the dialog.
Tab
Moves focus to the next focusable element within the content. Focus is trapped within the dialog.
Shift+Tab
Moves focus to the previous focusable element. Focus is trapped within the dialog.
Escape
Closes the dialog and moves focus to trigger or the defined final focus element.
Space
Activate the focused control.

Demos

Basic

The plain confirmation is a question, one sentence about what is lost, and Cancel then Continue. The title asks if they are sure, and the description names the account and the data, at the default width. Use this when you do not need an icon or a tighter panel, and keep the safer action first so it is the one they reach before the commit.

Preview width

Small

A USB prompt does not need a wide panel. size set to sm tightens the content around one question, one sentence, and two short buttons, Don't allow and Allow. Use the small size for that kind of permission, and keep longer explanations on the default width so they are not scrolling inside a cramped box.

Preview width

Media

Sharing a project is easy to mix up with other confirms, so an icon in AlertDialogMedia sits above the title, ahead of the sentence about who gets the link. Hide the icon when the title already names the action. Reach for media when several dialogs would otherwise look identical, not as a replacement for the description.

Preview width

Small Media

Short copy and a thing people recognize from an icon can take both treatments. size is sm, a Bluetooth mark sits in AlertDialogMedia, and the buttons are Don't allow and Allow. Combine them for a device or a connection, and drop back to the default width, icon included, if the explanation grows into a paragraph.

Preview width

Destructive

Delete is the verb on the trigger, in the title, and on the action, with variant set to destructive so the button does not look like a safe continue. The trash icon is tinted the same way, inside a small dialog, and the description says the chat is gone for good. Save this treatment for steps that cannot be undone, and repeat the verb so the confirm matches the question.

Preview width

Rtl

Two confirms in Arabic, the wide account question and the small accessory question with a Bluetooth icon. dir is set to rtl on the wrapper and again on the content, because the panel does not inherit direction from the button that opened it. Title, description, and footer then follow the reading order, with cancel still the dismissal and the other button still the commit.

Preview width

FAQ

When should I use an Alert Dialog instead of a Dialog?

Use an Alert Dialog when the reader only confirms or cancels, such as deleting a file. If they have to type, pick a date or fill in a form, use a Dialog instead: the Alert Dialog is a short interruption, the Dialog a small page.

How do I keep the Alert Dialog open until my request finishes in React?

AlertDialogAction closes the dialog on click. Call event.preventDefault() in its onClick to keep it open, control open, and close it once the request settles.

Does the Alert Dialog close on Escape or on a click outside?

Escape closes it, but a click outside doesn't, so the choice stays explicit: the reader picks an action or cancels.

How do I style a delete confirmation in the Alert Dialog?

Pass variant="destructive" to AlertDialogAction and repeat the verb on it, such as Delete. Make the title the action and the object, and the description its consequence in one sentence. The Destructive demo shows the pattern.

Is the Radix UI Alert Dialog accessible?

Yes. It renders with role="alertdialog", traps focus while open and returns it to the trigger when it closes. Always include AlertDialogTitle so screen readers announce what is being confirmed, and add AlertDialogDescription for the consequence.

How do I make a smaller Alert Dialog or add an icon?

Pass size="sm" to AlertDialogContent for a compact dialog, and put an icon in AlertDialogMedia above the title. The Small, Media and Small Media demos show each one.

How do I open an Alert Dialog without a trigger button?

Leave out AlertDialogTrigger and control whether it's open from your own state, for example after a form fails validation or from a menu item. Use open and onOpenChange.

How do I install the Alert Dialog in React?

Run the command in the Installation section above: it adds alert-dialog to your components/ui folder with the Button it uses. React and Solid use the shadcn CLI, Vue uses shadcn-vue and Svelte uses shadcn-svelte, each after its one-time setup.

API Reference

AlertDialog

data-slot="alert-dialog"

PropType
open?boolean

Whether it's open. Pair with onOpenChange to control it.

defaultOpen?boolean

Whether it starts open, when you don't control open.

onOpenChange?{ bivarianceHack(open: boolean): void; }["bivarianceHack"]

Called when it opens or closes.

Type
{ bivarianceHack(open: boolean): void; }["bivarianceHack"]

AlertDialogTrigger

data-slot="alert-dialog-trigger"

PropType
asChild?boolean

Merge props onto the child element instead of rendering a host.

AlertDialogPortal

data-slot="alert-dialog-portal"

PropType
container?Element | DocumentFragment | null

Specify a container element to portal the content into.

Type
Element | DocumentFragment | null
forceMount?true

Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

AlertDialogOverlay

data-slot="alert-dialog-overlay"

PropType
forceMount?true

Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

asChild?boolean

Merge props onto the child element instead of rendering a host.

className?string

Merged with the part's classes.

AlertDialogContent

data-slot="alert-dialog-content"

PropType
deferPointerDownOutside?boolean

When true, a pointerdown event outside of the layered element will wait for the interaction's click event before dispatching, allowing third-party code to stop propagation of later events and cancel dismissal.

forceMount?true

Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

onCloseAutoFocus?{ bivarianceHack(event: Event): void; }["bivarianceHack"]

Event handler called when auto-focusing on close. Can be prevented.

Type
{ bivarianceHack(event: Event): void; }["bivarianceHack"]
onEscapeKeyDown?{ bivarianceHack(event: KeyboardEvent): void; }["bivarianceHack"]

Event handler called when the escape key is down. Can be prevented.

Type
{ bivarianceHack(event: KeyboardEvent): void; }["bivarianceHack"]
onFocusOutside?{ bivarianceHack(event: FocusOutsideEvent): void; }["bivarianceHack"]

Event handler called when the focus moves outside of the DismissableLayer. Can be prevented.

Type
{ bivarianceHack(event: FocusOutsideEvent): void; }["bivarianceHack"]
onOpenAutoFocus?{ bivarianceHack(event: Event): void; }["bivarianceHack"]

Event handler called when auto-focusing on open. Can be prevented.

Type
{ bivarianceHack(event: Event): void; }["bivarianceHack"]
size?"default" | "sm"

The size.

Type
"default" | "sm"
Default
"default"
asChild?boolean

Merge props onto the child element instead of rendering a host.

className?string

Merged with the part's classes.

AttributeType
data-size?string

Mirrors size.

AlertDialogHeader

<div> data-slot="alert-dialog-header"

PropType
description?string

The description of the alert dialog.

title?string

The title of the alert dialog.

className?string

Merged with the part's classes.

AlertDialogFooter

<div> data-slot="alert-dialog-footer"

PropType
className?string

Merged with the part's classes.

AlertDialogMedia

<div> data-slot="alert-dialog-media"

PropType
className?string

Merged with the part's classes.

AlertDialogTitle

data-slot="alert-dialog-title"

PropType
asChild?boolean

Merge props onto the child element instead of rendering a host.

className?string

Merged with the part's classes.

AlertDialogDescription

data-slot="alert-dialog-description"

PropType
asChild?boolean

Merge props onto the child element instead of rendering a host.

className?string

Merged with the part's classes.

AlertDialogAction

PropType
size?"default" | "icon" | "icon-lg" | "icon-md" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "md" | "sm" | "xl" | "xs"

The size.

Type
"default" | "icon" | "icon-lg" | "icon-md" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "md" | "sm" | "xl" | "xs"
Default
"md"
variant?"default" | "destructive" | "ghost" | "link" | "outline" | "secondary"

The visual style.

Type
"default" | "destructive" | "ghost" | "link" | "outline" | "secondary"
Default
"default"
asChild?boolean

Merge props onto the child element instead of rendering a host.

className?string

Merged with the part's classes.

AlertDialogCancel

PropType
size?"default" | "icon" | "icon-lg" | "icon-md" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "md" | "sm" | "xl" | "xs"

The size.

Type
"default" | "icon" | "icon-lg" | "icon-md" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "md" | "sm" | "xl" | "xs"
Default
"md"
variant?"default" | "destructive" | "ghost" | "link" | "outline" | "secondary"

Ark default: default.

Type
"default" | "destructive" | "ghost" | "link" | "outline" | "secondary"
Default
"outline"
asChild?boolean

Merge props onto the child element instead of rendering a host.

className?string

Merged with the part's classes.

With other components

All 174 components39 alert dialog examples