Primitive / Moleculebeta

Alert Dialog

Destructive action confirmation dialog with explicit cancel and action controls.

@glinui/uiComponent: alert-dialog

Installation

Install from the package for shared ownership or from the registry for copy-paste control.

Package Manager

pnpm add @glinui/ui @glinui/tokens

Registry

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

Usage

Basic Confirmation

TSX

1import {
2  AlertDialog,
3  AlertDialogAction,
4  AlertDialogCancel,
5  AlertDialogContent,
6  AlertDialogDescription,
7  AlertDialogFooter,
8  AlertDialogHeader,
9  AlertDialogTitle,
10  AlertDialogTrigger,
11  Button
12} from "@glinui/ui"
13
14export function Demo() {
15  return (
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}

Glass Surface

TSX

1import {
2  AlertDialog,
3  AlertDialogAction,
4  AlertDialogCancel,
5  AlertDialogContent,
6  AlertDialogDescription,
7  AlertDialogFooter,
8  AlertDialogHeader,
9  AlertDialogTitle,
10  AlertDialogTrigger,
11  Button
12} from "@glinui/ui"
13
14export function Demo() {
15  return (
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

Built on Radix Alert Dialog with focus trap and screen reader semantics.
Use a clear, explicit `AlertDialogTitle` and concise `AlertDialogDescription` for destructive actions.
Focus returns to the trigger after close.

Keyboard Interactions

Key	Action
`Escape`	Close the alert dialog.
`Tab / Shift+Tab`	Cycle focus between actions.
`Enter / Space`	Activate focused action.

ARIA Attributes

`role="alertdialog"`
`aria-labelledby`
`aria-describedby`

Reduced Motion

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

Affected properties

opacitytransform

API Reference

`AlertDialog`

Prop	Type	Required	Default	Description
`open`	`boolean`	-	`-`	Controlled open state.
`defaultOpen`	`boolean`	-	`-`	Initial open state for uncontrolled usage.
`onOpenChange`	`(open: boolean) => void`	-	`-`	Open state change handler.
`variant`	`"default" \| "glass" \| "matte"`	No	`"default"`	Variant option from alertDialogActionVariants.

`AlertDialogTrigger`

Prop	Type	Required	Default	Description
`asChild`	`boolean`	-	`false`	Render trigger as child element.
`variant`	`"default" \| "glass" \| "matte"`	No	`"default"`	Variant option from alertDialogActionVariants.

`AlertDialogContentProps`

Prop	Type	Required	Default	Description
`variant`	`"default" \| "glass" \| "matte"`	No	`glass`	Visual surface treatment.
`size`	`"sm" \| "md" \| "lg"`	No	`md`	Content width and density scale.

`AlertDialogActionProps`

Prop	Type	Required	Default	Description
`variant`	`"default" \| "glass" \| "matte"`	No	`default`	Visual treatment for confirm action.

`AlertDialogCancel`

Prop	Type	Required	Default	Description
`asChild`	`boolean`	-	`false`	Render cancel action as child element.
`variant`	`"default" \| "glass" \| "matte"`	No	`"default"`	Variant option from alertDialogActionVariants.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { AlertDialog } from "@glinui/ui"

Source Files

alert-dialog.tsx

alert-dialog.test.tsxtest

Dependencies

@glinui/ui

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.