Alert Dialog

A modal dialog that asks the user to confirm an action.

import * as React from "react";

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

export default function AlertDialogBasic() {
  const [open, setOpen] = React.useState(false);
  return (
    <AlertDialog open={open} onOpenChange={setOpen}>
      <AlertDialogTrigger render={<Button variant="secondary" />}>Sign out</AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Sign out?</AlertDialogTitle>
          <AlertDialogDescription>
            You’ll need to sign in again on this device.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction onClick={() => setOpen(false)}>Sign out</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

Installation

Add the registryOnce per project
pnpm dlx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
Add alert-dialog
pnpm dlx shadcn@latest add @jarvis/alert-dialog

Usage

import * as React from "react";

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

export function LeaveTeam() {
  const [open, setOpen] = React.useState(false);
  return (
    <AlertDialog open={open} onOpenChange={setOpen}>
      <AlertDialogTrigger render={<Button variant="secondary" />}>Leave team</AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Leave the team?</AlertDialogTitle>
          <AlertDialogDescription>You’ll lose access to its projects.</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction onClick={() => setOpen(false)}>Leave</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

Unlike a Dialog, an alert dialog doesn't close when you click outside it. AlertDialogCancel closes it, but AlertDialogAction doesn't, so control the dialog with open and onOpenChange and close it when the action finishes.

Always include an AlertDialogTitle and AlertDialogDescription.

Composition

AlertDialog
- AlertDialogTrigger
- AlertDialogContent
  - AlertDialogHeader
    - AlertDialogTitle
    - AlertDialogDescription
  - AlertDialogFooter
    - AlertDialogCancel
    - AlertDialogAction

Examples

Destructive

Set variant="destructive" on the action for things that can't be undone.

import { Trash2Icon } from "lucide-react";
import * as React from "react";

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

export default function AlertDialogDestructive() {
  const [open, setOpen] = React.useState(false);
  return (
    <AlertDialog open={open} onOpenChange={setOpen}>
      <AlertDialogTrigger render={<Button variant="destructive" />}>
        <Trash2Icon />
        Delete project
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Delete “Website redesign”?</AlertDialogTitle>
          <AlertDialogDescription>
            This permanently deletes the project and its 28 tasks. Anyone with the link will see a
            “not found” page. This can’t be undone.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction
            variant="destructive"
            onClick={() => {
              setOpen(false);
              toast.add({ title: "Project deleted" });
            }}
          >
            Delete
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

Props

Part	Extends
AlertDialog	Base UI's AlertDialog.Root
AlertDialogTrigger	Base UI's AlertDialog.Trigger
AlertDialogPortal	Base UI's AlertDialog.Portal
AlertDialogOverlay	Base UI's AlertDialog.Backdrop
AlertDialogContent	Base UI's AlertDialog.Popup
AlertDialogHeader	<div>
AlertDialogFooter	<div>
AlertDialogTitle	Base UI's AlertDialog.Title
AlertDialogDescription	Base UI's AlertDialog.Description
AlertDialogAction	Button
AlertDialogCancel	Base UI's AlertDialog.Close

The tables leave out className, style and render. Parts built on Base UI take them as its styling and composition guides describe.

AlertDialog

Prop	Type	Default
`onOpenChange` Event handler called when the alert dialog is opened or closed.	`((open: boolean, eventDetails: AlertDialog.Root.ChangeEventDetails) => void)`	—
`actionsRef` A ref to imperative actions. `unmount`: Ends the closing phase of the alert dialog after an externally controlled closing animation finishes. Call `preventUnmountOnClose()` in `onOpenChange` first, otherwise the alert dialog completes closing on its own. Whether it leaves the DOM is decided by `keepMounted` on the portal. `close`: Closes the alert dialog imperatively when called.	`React.RefObject<DialogRootActions \| null>`	—
`handle` A handle to associate the alert dialog with a trigger. If specified, allows external triggers to control the alert dialog's open state. Can be created with the AlertDialog.createHandle() method.	`AlertDialog.Handle<unknown>`	—
`open` Whether the dialog is currently open.	`boolean`	—
`defaultOpen` Whether the dialog is initially open. To render a controlled dialog, use the `open` prop instead.	`boolean`	`false`
`onOpenChangeComplete` Event handler called after any animations complete when the dialog is opened or closed.	`((open: boolean) => void)`	—
`children` The content of the dialog. This can be a regular React node or a render function that receives the `payload` of the active trigger.	`PayloadChildRenderFunction<unknown> \| React.ReactNode`	—
`triggerId` ID of the trigger that the dialog is associated with. This is useful in conjunction with the `open` prop to create a controlled dialog. There's no need to specify this prop when the dialog is uncontrolled (that is, when the `open` prop is not set).	`string \| null`	—
`defaultTriggerId` ID of the trigger that the dialog is associated with. This is useful in conjunction with the `defaultOpen` prop to create an initially open dialog.	`string \| null`	—

AlertDialogTrigger

Prop	Type	Default
`handle` A handle to associate the trigger with an alert dialog. Can be created with the AlertDialog.createHandle() method.	`AlertDialog.Handle<unknown>`	—
`nativeButton` Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).	`boolean`	`true`
`payload` A payload to pass to the dialog when it is opened.	`unknown`	—
`id` ID of the trigger. In addition to being forwarded to the rendered element, it is also used to specify the active trigger for the dialog in controlled mode (with the DialogRoot `triggerId` prop).	`string`	—

AlertDialogPortal

Prop	Type	Default
`keepMounted` Whether to keep the portal mounted in the DOM while the popup is hidden.	`boolean`	`false`
`container` A parent element to render the portal element into.	`HTMLElement \| React.RefObject<HTMLElement \| ShadowRoot \| null> \| ShadowRoot \| null`	—

AlertDialogOverlay

Prop	Type	Default
`forceRender` Whether the backdrop is forced to render even when nested.	`boolean`	`false`

AlertDialogContent

Prop	Type	Default
`initialFocus` Determines the element to focus when the dialog is opened. By default, focus moves to the first tabbable element inside the popup, except when the dialog is opened by touch — then the popup itself is focused to avoid opening the virtual keyboard. `false`: Do not move focus. `true`: Move focus based on the default behavior (first tabbable element or popup). `RefObject`: Move focus to the ref element. `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`). Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing.	`boolean \| React.RefObject<HTMLElement \| null> \| ((openType: InteractionType) => boolean \| HTMLElement \| null \| void)`	—
`finalFocus` Determines the element to focus when the dialog is closed. `false`: Do not move focus. `true`: Move focus based on the default behavior (trigger or previously focused element). `RefObject`: Move focus to the ref element. `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`). Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing.	`boolean \| React.RefObject<HTMLElement \| null> \| ((closeType: InteractionType) => boolean \| HTMLElement \| null \| void)`	—

AlertDialogAction

Prop	Type	Default
`focusableWhenDisabled` Whether the button should be focusable when disabled.	`boolean`	`false`
`nativeButton` Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).	`boolean`	`true`
`variant`	`"destructive" \| "ghost" \| "link" \| "outline" \| "primary" \| "secondary"`	`"primary"`
`size`	`"default" \| "icon" \| "icon-lg" \| "icon-sm" \| "icon-xs" \| "lg" \| "sm" \| "xs"`	`"default"`

AlertDialogCancel

Prop	Type	Default
`nativeButton` Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).	`boolean`	`true`
`variant`	`"destructive" \| "ghost" \| "link" \| "outline" \| "primary" \| "secondary"`	`"secondary"`
`size`	`"default" \| "icon" \| "icon-lg" \| "icon-sm" \| "icon-xs" \| "lg" \| "sm" \| "xs"`	`"default"`