Loading…

Alert Dialog

beta

A confirmation modal whose card springs up out of a blur while the backdrop blurs in behind it; the destructive tone shakes its icon once on open.

Overlays
1 file
2 npm packages
Accessibility notes

Playground

Installation

The CLI installs button as well, because this component imports it. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add alert-dialog

npm packages installed: class-variance-authority, radix-ui.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { AlertDialog } from "@/components/ui/alert-dialog";

Examples

Every example the tests run, live and operable, side by side.

Default
Confirmation
Without Icon
Custom Media

API

Generated from the component's own types, so a prop cannot appear here without existing.

<AlertDialogOverlay>

Every prop of Radix UI’s AlertDialog.Overlay, plus className.

<AlertDialogContent>

Prop	Type	Default
`tone`	`"default" \| "destructive"`	`"default"`

Every prop of Radix UI’s AlertDialog.Content, plus className.

<AlertDialogHeader>

Prop	Type	Default
`icon` An icon shown in a tile above the title. In the destructive tone it shakes once on open.	`ReactNode`	—

Plus every attribute of <div>.

<AlertDialogMedia>

Plus every attribute of <div>.

<AlertDialogFooter>

Plus every attribute of <div>.

<AlertDialogTitle>

Every prop of Radix UI’s AlertDialog.Title, plus className.

<AlertDialogDescription>

Every prop of Radix UI’s AlertDialog.Description, plus className.

<AlertDialogAction>

Every prop of Radix UI’s AlertDialog.Action, plus className.

<AlertDialogCancel>

Every prop of Radix UI’s AlertDialog.Cancel, plus className.

Accessibility

Radix AlertDialog: the content has role="alertdialog", is named by AlertDialogTitle and described by AlertDialogDescription — render both, and make the description say what will be lost. Focus is trapped while open, lands on Cancel (the safe choice) and returns to the trigger on close. Escape cancels; clicking outside does not dismiss, so a consequential choice is never made by accident. The media tile and its one-off shake are aria-hidden decoration, and colour is never the only warning. Every entrance, stagger and the shake collapse under reduced motion.

Quality

Measured from the source and its tests at build time.

All scores

7/7

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — does not apply
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Used in

Whole screens assembled from this component. Installing one brings this and everything else it needs with it.

API keys

Prop

Type

Default

tone

"default" | "destructive"

"default"

Prop

Type

Default

icon

An icon shown in a tile above the title. In the destructive tone it shakes once on open.

ReactNode

—