Primitive / Moleculebeta

Alert Dialog

Destructive action confirmation dialog with explicit cancel and action controls.

@glinui/uiComponent: alert-dialog

Installation$

Package Manager$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add alert-dialog

Usage$

TSX

1import {
2AlertDialog,
3AlertDialogAction,
4AlertDialogCancel,
5AlertDialogContent,
6AlertDialogDescription,
7AlertDialogFooter,
8AlertDialogHeader,
9AlertDialogTitle,
10AlertDialogTrigger,
11Button
12} from "@glinui/ui"
13
14export function AlertDialogBasicDemo() {
15return (
16  <AlertDialog>
17    <AlertDialogTrigger asChild>
18      <Button variant="matte">Delete project</Button>
19    </AlertDialogTrigger>
20    <AlertDialogContent>
21      <AlertDialogHeader>
22        <AlertDialogTitle>Delete project?</AlertDialogTitle>
23        <AlertDialogDescription>
24          This action cannot be undone and will permanently remove all project data.
25        </AlertDialogDescription>
26      </AlertDialogHeader>
27      <AlertDialogFooter>
28        <AlertDialogCancel>Cancel</AlertDialogCancel>
29        <AlertDialogAction>Delete</AlertDialogAction>
30      </AlertDialogFooter>
31    </AlertDialogContent>
32  </AlertDialog>
33)
34}

Examples$

Glass Surface$

TSX

1import {
2AlertDialog,
3AlertDialogAction,
4AlertDialogCancel,
5AlertDialogContent,
6AlertDialogDescription,
7AlertDialogFooter,
8AlertDialogHeader,
9AlertDialogTitle,
10AlertDialogTrigger,
11Button
12} from "@glinui/ui"
13
14export function AlertDialogGlassDemo() {
15return (
16  <AlertDialog>
17    <AlertDialogTrigger asChild>
18      <Button variant="glass">Archive workspace</Button>
19    </AlertDialogTrigger>
20    <AlertDialogContent variant="glass" size="sm">
21      <AlertDialogHeader>
22        <AlertDialogTitle>Archive workspace?</AlertDialogTitle>
23        <AlertDialogDescription>
24          Members will lose write access until you restore the workspace.
25        </AlertDialogDescription>
26      </AlertDialogHeader>
27      <AlertDialogFooter>
28        <AlertDialogCancel>Not now</AlertDialogCancel>
29        <AlertDialogAction variant="glass">Archive</AlertDialogAction>
30      </AlertDialogFooter>
31    </AlertDialogContent>
32  </AlertDialog>
33)
34}

Accessibility$

Uses role="alertdialog" semantics through Radix.
Focus is trapped inside the dialog while open.
Escape closes and returns focus to the trigger element.
Keep destructive copy explicit in AlertDialogTitle and AlertDialogDescription.

Reduced Motion$

Overlay and panel animations respect prefers-reduced-motion and reduce to instant state changes.

API Reference$

AlertDialog exposes Radix root state props (open, defaultOpen, onOpenChange) and composes trigger/content/action parts for explicit destructive confirmation flows.

AlertDialogContent$

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from alertDialogContentVariants.
`variant`	`"default" \| "glass" \| "matte"`	No	`"glass"`	Variant option from alertDialogContentVariants.

AlertDialogAction$

Prop	Type	Required	Default	Description
`variant`	`"default" \| "glass" \| "matte"`	No	`"default"`	Variant option from alertDialogActionVariants.

Source$

TSX

1import {
2  AlertDialog,
3  AlertDialogTrigger,
4  AlertDialogContent,
5  AlertDialogHeader,
6  AlertDialogTitle,
7  AlertDialogDescription,
8  AlertDialogFooter,
9  AlertDialogCancel,
10  AlertDialogAction
11} from "@glinui/ui"

packages/ui/src/components/alert-dialog.tsx

packages/ui/src/tests/alert-dialog.test.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/alert-dialog.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

AlertDialogActionProps

`AlertDialogActionProps`

Prop	Type	Required	Default	Description
`variant`	`"default" \| "glass" \| "matte"`	No	`"default"`	Variant option from alertDialogActionVariants.

`AlertDialogContentProps`

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from alertDialogContentVariants.
`variant`	`"default" \| "glass" \| "matte"`	No	`"glass"`	Variant option from alertDialogContentVariants.