shadcn.io is an independent project built on shadcn/ui
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, React Aria doesn't close it on an outside click.
Installation
Anatomy
AlertDialogTrigger
AlertDialogOverlay
AlertDialogContent
└── AlertDialogPositioner
AlertDialogTitle
AlertDialogDescription
AlertDialogActionUsage
import {
AlertDialog, AlertDialogAction, AlertDialogCancel,
AlertDialogDescription, AlertDialogFooter, AlertDialogHeader,
AlertDialogTitle, AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";const AlertDialogDemo = () => (
<AlertDialogTrigger>
<Button variant="outline">Show Dialog</Button>
<AlertDialog>
<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>
</AlertDialog>
</AlertDialogTrigger>
);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.
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.
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.
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.
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.
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.
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 when pressed. For work that takes time, use a regular Button with onPress, control isOpen, 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.
Set isDismissable on the content if a click outside should close it too.
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 React Aria 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.
Use isOpen 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-content"
defaultOpen?boolean
Whether the overlay is open by default (uncontrolled).
onOpenChange?(isOpen: boolean) → void
Handler that is called when the overlay's open state changes.
- Parameters
isOpen– boolean- Returns
void
isDismissable?boolean
Whether to close the modal when the user interacts outside it.
- Default
false
isEntering?boolean
Whether the modal is currently performing an entry animation.
isExiting?boolean
Whether the modal is currently performing an exit animation.
isKeyboardDismissDisabled?boolean
Whether pressing the escape key to close the modal should be disabled.
- Default
false
isOpen?boolean
Whether the overlay is open by default (controlled).
onEnter?(element: HTMLElement) → void | Promise<void>
Callback when the modal starts entering. Return a promise to indicate when the entry animation has completed.
- Type
(element: HTMLElement) → void | Promise<void>- Parameters
element– HTMLElement- Returns
void | Promise<void>
onExit?(element: HTMLElement) → void | Promise<void>
Callback when the modal starts exiting. Return a promise to indicate when the exit animation has completed.
- Type
(element: HTMLElement) → void | Promise<void>- Parameters
element– HTMLElement- Returns
void | Promise<void>
shouldCloseOnInteractOutside?(element: Element) → boolean
When user interacts with the argument element outside of the overlay ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the overlay. By default, onClose will always be called on interaction outside the overlay ref.
- Parameters
element– Element- Returns
boolean
size?"default" | "sm"
The size.
- Type
"default" | "sm"- Default
"default"
slot?string | null
A slot name for the component. Slots allow the component to receive props from a parent
component. An explicit null value indicates that the local props completely override all
props received from a parent.
- Type
string | null
style?StyleOrFunction<T>
The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
- Type
StyleOrFunction<T>
UNSTABLE_deferUntilEntered?boolean
Whether to wait until the entry animation completes before hiding content outside the modal and moving focus into it.
UNSTABLE_overrideFocus?boolean
Whether to override the focus() method so it does not scroll the page.
This is temporary and will be removed after fully testing all overlays.
UNSTABLE_portalContainer?Element
The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to. Deprecated. - Use a parent UNSAFE_PortalProvider to set your portal container instead.
- Default
document.body
render?DOMRenderFunction<E, T>
Overrides the default DOM element with a custom render function.
This allows rendering existing components with built-in styles and behaviors
such as router links, animation libraries, and pre-styled components.
Requirements:
- You must render the expected element type (e.g. if <button> is expected, you cannot render an
<a>).
- Only a single root DOM element can be rendered (no fragments).
- You must pass through props and ref to the underlying DOM element, merging with your own prop
as appropriate.
- Type
DOMRenderFunction<E, T>
className?string
Merged with the part's classes.
data-size?string
Mirrors size.
AlertDialogTrigger
data-slot="alert-dialog-trigger"
defaultOpen?boolean
Whether the overlay is open by default (uncontrolled).
onOpenChange?(isOpen: boolean) → void
Handler that is called when the overlay's open state changes.
- Parameters
isOpen– boolean- Returns
void
isOpen?boolean
Whether the overlay is open by default (controlled).
AlertDialogOverlay
data-slot="alert-dialog-overlay"
defaultOpen?boolean
Whether the overlay is open by default (uncontrolled).
onOpenChange?(isOpen: boolean) → void
Handler that is called when the overlay's open state changes.
- Parameters
isOpen– boolean- Returns
void
isDismissable?boolean
Whether to close the modal when the user interacts outside it.
- Default
false
isEntering?boolean
Whether the modal is currently performing an entry animation.
isExiting?boolean
Whether the modal is currently performing an exit animation.
isKeyboardDismissDisabled?boolean
Whether pressing the escape key to close the modal should be disabled.
- Default
false
isOpen?boolean
Whether the overlay is open by default (controlled).
onEnter?(element: HTMLElement) → void | Promise<void>
Callback when the modal starts entering. Return a promise to indicate when the entry animation has completed.
- Type
(element: HTMLElement) → void | Promise<void>- Parameters
element– HTMLElement- Returns
void | Promise<void>
onExit?(element: HTMLElement) → void | Promise<void>
Callback when the modal starts exiting. Return a promise to indicate when the exit animation has completed.
- Type
(element: HTMLElement) → void | Promise<void>- Parameters
element– HTMLElement- Returns
void | Promise<void>
shouldCloseOnInteractOutside?(element: Element) → boolean
When user interacts with the argument element outside of the overlay ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the overlay. By default, onClose will always be called on interaction outside the overlay ref.
- Parameters
element– Element- Returns
boolean
slot?string | null
A slot name for the component. Slots allow the component to receive props from a parent
component. An explicit null value indicates that the local props completely override all
props received from a parent.
- Type
string | null
style?StyleOrFunction<T>
The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
- Type
StyleOrFunction<T>
UNSTABLE_deferUntilEntered?boolean
Whether to wait until the entry animation completes before hiding content outside the modal and moving focus into it.
UNSTABLE_overrideFocus?boolean
Whether to override the focus() method so it does not scroll the page.
This is temporary and will be removed after fully testing all overlays.
UNSTABLE_portalContainer?Element
The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to. Deprecated. - Use a parent UNSAFE_PortalProvider to set your portal container instead.
- Default
document.body
render?DOMRenderFunction<E, T>
Overrides the default DOM element with a custom render function.
This allows rendering existing components with built-in styles and behaviors
such as router links, animation libraries, and pre-styled components.
Requirements:
- You must render the expected element type (e.g. if <button> is expected, you cannot render an
<a>).
- Only a single root DOM element can be rendered (no fragments).
- You must pass through props and ref to the underlying DOM element, merging with your own prop
as appropriate.
- Type
DOMRenderFunction<E, T>
className?string
Merged with the part's classes.
AlertDialogContent
defaultOpen?boolean
Whether the overlay is open by default (uncontrolled).
onOpenChange?(isOpen: boolean) → void
Handler that is called when the overlay's open state changes.
- Parameters
isOpen– boolean- Returns
void
isDismissable?boolean
Whether to close the modal when the user interacts outside it.
- Default
false
isEntering?boolean
Whether the modal is currently performing an entry animation.
isExiting?boolean
Whether the modal is currently performing an exit animation.
isKeyboardDismissDisabled?boolean
Whether pressing the escape key to close the modal should be disabled.
- Default
false
isOpen?boolean
Whether the overlay is open by default (controlled).
onEnter?(element: HTMLElement) → void | Promise<void>
Callback when the modal starts entering. Return a promise to indicate when the entry animation has completed.
- Type
(element: HTMLElement) → void | Promise<void>- Parameters
element– HTMLElement- Returns
void | Promise<void>
onExit?(element: HTMLElement) → void | Promise<void>
Callback when the modal starts exiting. Return a promise to indicate when the exit animation has completed.
- Type
(element: HTMLElement) → void | Promise<void>- Parameters
element– HTMLElement- Returns
void | Promise<void>
shouldCloseOnInteractOutside?(element: Element) → boolean
When user interacts with the argument element outside of the overlay ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the overlay. By default, onClose will always be called on interaction outside the overlay ref.
- Parameters
element– Element- Returns
boolean
size?"default" | "sm"
The size.
- Type
"default" | "sm"
slot?string | null
A slot name for the component. Slots allow the component to receive props from a parent
component. An explicit null value indicates that the local props completely override all
props received from a parent.
- Type
string | null
style?StyleOrFunction<T>
The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
- Type
StyleOrFunction<T>
UNSTABLE_deferUntilEntered?boolean
Whether to wait until the entry animation completes before hiding content outside the modal and moving focus into it.
UNSTABLE_overrideFocus?boolean
Whether to override the focus() method so it does not scroll the page.
This is temporary and will be removed after fully testing all overlays.
UNSTABLE_portalContainer?Element
The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to. Deprecated. - Use a parent UNSAFE_PortalProvider to set your portal container instead.
- Default
document.body
render?DOMRenderFunction<E, T>
Overrides the default DOM element with a custom render function.
This allows rendering existing components with built-in styles and behaviors
such as router links, animation libraries, and pre-styled components.
Requirements:
- You must render the expected element type (e.g. if <button> is expected, you cannot render an
<a>).
- Only a single root DOM element can be rendered (no fragments).
- You must pass through props and ref to the underlying DOM element, merging with your own prop
as appropriate.
- Type
DOMRenderFunction<E, T>
className?string
Merged with the part's classes.
AlertDialogHeader
<div> data-slot="alert-dialog-header"
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"
className?string
Merged with the part's classes.
AlertDialogMedia
<div> data-slot="alert-dialog-media"
className?string
Merged with the part's classes.
AlertDialogTitle
level?number
The heading level.
- Default
3
render?DOMRenderFunction<E, T>
Overrides the default DOM element with a custom render function.
This allows rendering existing components with built-in styles and behaviors
such as router links, animation libraries, and pre-styled components.
Requirements:
- You must render the expected element type (e.g. if <button> is expected, you cannot render an
<a>).
- Only a single root DOM element can be rendered (no fragments).
- You must pass through props and ref to the underlying DOM element, merging with your own prop
as appropriate.
- Type
DOMRenderFunction<E, T>
className?string
Merged with the part's classes.
AlertDialogDescription
<div>
className?string
Merged with the part's classes.
AlertDialogAction
data-slot="alert-dialog-action"
children?ReactNode
The content to display in the button.
clickEffect?boolean
Apply a click effect to the button.
- Default
true
download?LinkPrimitiveProps["download"]
With href, downloads the linked file instead of opening it.
href?string
When set, the button renders as a link.
isDisabled?boolean
Whether the button is disabled.
isLoading?boolean
Show a loading indicator.
- Default
false
rel?string
With href, the link's relationship to the page (noreferrer, …).
target?string
With href, where the linked page opens (_blank, …).
className?string
Merged with the part's classes.
AlertDialogCancel
data-slot="alert-dialog-cancel"
children?ReactNode
The content to display in the button.
clickEffect?boolean
Apply a click effect to the button.
- Default
true
download?LinkPrimitiveProps["download"]
With href, downloads the linked file instead of opening it.
href?string
When set, the button renders as a link.
isDisabled?boolean
Whether the button is disabled.
isLoading?boolean
Show a loading indicator.
- Default
false
rel?string
With href, the link's relationship to the page (noreferrer, …).
target?string
With href, where the linked page opens (_blank, …).
className?string
Merged with the part's classes.
