Alert Dialog

Alert Dialog asks the user to confirm a consequential action before it happens. It blocks the current workflow until the user chooses an action.

Use it for destructive or difficult-to-reverse decisions, such as deleting data or applying a permanent policy. Use a regular dialog for tasks that do not require an explicit warning.

Live previewInteractive / Local

Installation

Sourcebash

pnpm dlx shadcn@latest add http://ui.argv-tech.dev/r/alert-dialog.json

Usage

Sourcetsx

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

<AlertDialog>
    <AlertDialogTrigger render={<Button />}>Apply policy</AlertDialogTrigger>
    <AlertDialogContent>
        <AlertDialogHeader>
            <AlertDialogTitle>Apply retention policy?</AlertDialogTitle>
            <AlertDialogDescription>Logs older than 30 days will be archived.</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction>Apply</AlertDialogAction>
        </AlertDialogFooter>
    </AlertDialogContent>
</AlertDialog>

Composition

Sourcetext

AlertDialog
├── AlertDialogTrigger
└── AlertDialogContent
    ├── AlertDialogHeader
    │   ├── AlertDialogMedia
    │   ├── AlertDialogTitle
    │   └── AlertDialogDescription
    └── AlertDialogFooter
        ├── AlertDialogCancel
        └── AlertDialogAction

AlertDialogContent accepts size="default" or size="sm". The small size works well for a short title, description, and two actions.

Control the root with open and onOpenChange, or let it manage its own state through AlertDialogTrigger. AlertDialogAction and AlertDialogCancel accept the same variant and size props as Button.

Use the action for the choice that continues the operation. Use the cancel control for the safe exit path.

API Reference

AlertDialog

Prop	Type	Default
`defaultOpen`	`boolean`	`false`
`open`	`boolean`	-
`onOpenChange`	`(open: boolean) => void`	-

AlertDialogTrigger

Prop	Type	Default
`render`	`ReactElement` \| `function`	`button`

AlertDialogContent

The content automatically renders inside AlertDialogPortal with AlertDialogOverlay.

Prop	Type	Default
`size`	`"default"` \| `"sm"`	`"default"`
`className`	`string`	-

AlertDialogAction

Prop	Type	Default
`variant`	Button variant	`"default"`
`size`	Button size	`"default"`
`className`	`string`	-

AlertDialogCancel

Prop	Type	Default
`variant`	Button variant	`"outline"`
`size`	Button size	`"default"`
`className`	`string`	-

AlertDialogHeader, AlertDialogFooter, and AlertDialogMedia forward native div props. AlertDialogTitle and AlertDialogDescription forward the corresponding Base UI primitive props.

Accessibility

Always provide an AlertDialogTitle and an AlertDialogDescription. The title should name the decision, while the description should explain its consequence in plain language.

Place the safest action first in the footer. When the dialog closes, focus returns to the trigger so keyboard users can continue from a predictable location.