Alert Dialog

When to UseCopy Anchor Link

• to confirm an action that can’t be undone, such as discarding a draft or deleting an attachment
• for a message that users can’t dismiss with a stray click

When Not to UseCopy Anchor Link

• for a form (use a Dialog)
• for a message that needs no response (use an Alert)

See Dialog for a comparison of the Dialog, the Alert Dialog, the Sheet, and the Drawer. See Alert for a comparison of the Alert, the toast, and the Alert Dialog.

AnatomyCopy Anchor Link

* The title is the Alert Dialog’s accessible name. The cancel button is the only part that closes the Alert Dialog.

AlertDialogContent renders the portal and the overlay, so you don’t need to add them. An Alert Dialog has no close button in its corner. The figure is 352px wide, so it shows the layout that is used below 640px.

SizesCopy Anchor Link

See Layout for the widths of the other overlays.

BehaviorCopy Anchor Link

An Alert Dialog is always modal because Base UI’s Alert Dialog has no modal prop. Focus stays in the popup, and the page’s scroll is locked.

AlertDialogAction is a Button, and a click on it doesn’t close the Alert Dialog. To close the Alert Dialog, keep the state in the parent with open and onOpenChange, and set it in the action’s handler.

When an Alert Dialog opens, focus is moved to the first control in the popup. Write AlertDialogCancel before AlertDialogAction so that the cancel button receives focus and a second press of Enter cancels.

MediaCopy Anchor Link

AlertDialogMedia contains an icon above the title. Set aria-hidden on the icon inside it.

ContentCopy Anchor Link

AccessibilityCopy Anchor Link

Base UI’s Alert Dialog sets the role, keeps focus in the popup, and closes when users press Escape. You provide the title and the cancel button.

Keep an AlertDialogCancel in the popup. A click on the overlay doesn’t close an Alert Dialog, so if there is no cancel button, Escape is the only way to close it, and users on a touch screen have no Escape key. See Dialog for the recommendation.

InstallationCopy Anchor Link

npx shadcn@latest add @summit/alert-dialog

The CLI also adds @summit/button.

UsageCopy Anchor Link

Keep the open state in the parent because the action’s handler has to close the Alert Dialog.

import { useState } from 'react';

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

const [open, setOpen] = useState(false);

<AlertDialog open={open} onOpenChange={setOpen}>
    <AlertDialogTrigger render={<Button variant="outline" />}>Discard draft</AlertDialogTrigger>
    <AlertDialogContent>
        <AlertDialogHeader>
            <AlertDialogTitle>Discard this draft?</AlertDialogTitle>
            <AlertDialogDescription>Your changes to the draft are lost. This cannot be undone.</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction
                onClick={() => {
                    discardDraft();
                    setOpen(false);
                }}
            >
                Discard
            </AlertDialogAction>
        </AlertDialogFooter>
    </AlertDialogContent>
</AlertDialog>;

If there is no AlertDialogTrigger, anything that sets open can open the Alert Dialog, such as the onClick of an item in a Dropdown Menu.

A Destructive ActionCopy Anchor Link

AlertDialogAction accepts the props of a Button. If the action deletes, set variant="destructive".

<AlertDialogAction variant="destructive" onClick={deleteAttachment}>
    Delete
</AlertDialogAction>

With MediaCopy Anchor Link

Place AlertDialogMedia first in the header. If you want it to stay centered above the title at every width, set size="sm" on AlertDialogContent.

import { TrashIcon } from '@phosphor-icons/react';

<AlertDialogContent size="sm">
    <AlertDialogHeader>
        <AlertDialogMedia>
            <TrashIcon aria-hidden />
        </AlertDialogMedia>
        <AlertDialogTitle>Delete attachment?</AlertDialogTitle>
        <AlertDialogDescription>The file is removed from this message right away.</AlertDialogDescription>
    </AlertDialogHeader>
</AlertDialogContent>;

API ReferenceCopy Anchor Link

The parts accept the props of their matching parts in Base UI’s Alert Dialog, where AlertDialogContent is AlertDialog.Popup, AlertDialogOverlay is AlertDialog.Backdrop, and AlertDialogCancel is AlertDialog.Close. AlertDialogHeader, AlertDialogMedia, and AlertDialogFooter accept the props of a div. See the Base UI Alert Dialog documentation for open, onOpenChange, initialFocus, and finalFocus.

AlertDialogContentCopy Anchor Link

AlertDialogCancelCopy Anchor Link

AlertDialogActionCopy Anchor Link

AlertDialogAction adds no props. It accepts the props of a Button.