ComponentsOverlays & feedback

Alert Dialog

Confirms an irreversible or high-stakes action. role="alertdialog", the overlay never closes it, and a danger tone puts focus on Cancel so a stray Enter can't destroy anything. Comes with an imperative useConfirm() for one-line confirmations.

Radix Alert Dialog components/alert-dialog.tsx, components/dialog.tsxtheme · material · accent · density · font

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { useConfirm } from "@vamos-ui/react";

const confirm = useConfirm();
if (await confirm({ title: "Delete 3 posts?", tone: "danger", confirmLabel: "Delete" })) {
  await deletePosts(ids);
}

Name the action with what it does ("Delete post", "End agreement"), never "Yes" / "OK".

On mobile the buttons stack with the action on top.

Examples

Danger

tone="danger": warning icon well, danger action, initial focus on Cancel.

useConfirm (HR)

await confirm({...}) resolves true or false. Needs a ConfirmProvider (App shell includes one).

Active

Type to confirm

requireText keeps the action disabled until the name is typed. Compared case-insensitively with the current locale's rules (Turkish İ/ı).

Async with error (PRM)

onConfirm can be async: the action shows loading, Cancel and Esc lock, and a thrown error stays inline instead of closing.

API

AlertDialog

Prop	Type	Default
`open / defaultOpen / onOpenChange` Controlled or uncontrolled open state.	`Radix root props`	`—`

AlertDialogContent

Prop	Type	Default
`tone` danger → icon well, danger action, focus on Cancel. default → focus on the action.	`"default" \| "danger"`	`"default"`
`dismissible` false locks Esc (e.g. while the action runs).	`boolean`	`true`
`container` Portal target; defaults to the nearest ThemeScope.	`HTMLElement \| null`	`—`

AlertDialogHeader

Prop	Type	Default
`title` Required accessible name.	`ReactNode`	`—`
`description` What happens and whether it can be undone.	`ReactNode`	`—`
`icon` Defaults to the warning well for tone="danger"; null removes it.	`ReactNode \| null`	`—`

AlertDialogAction

Prop	Type	Default
`variant` Defaults to danger or primary from the tone.	`Button variant`	`—`
`loading` Button loading state.	`boolean`	`—`
`keepOpen` Don't close on click — close yourself when async work ends.	`boolean`	`false`
`children` Name the action with a verb ("Delete post").	`ReactNode`	`"Confirm"`

AlertDialogCancel

Prop	Type	Default
`children` Dictionary confirm.cancel.	`ReactNode`	`"Cancel"`

useConfirm() options

Prop	Type	Default
`title` Required.	`ReactNode`	`—`
`description` Consequences.	`ReactNode`	`—`
`tone` As AlertDialogContent.	`"default" \| "danger"`	`"default"`
`confirmLabel / cancelLabel` Button labels.	`string`	`—`
`requireText` Text the user must type (locale-aware, case-insensitive).	`string`	`—`
`onConfirm` Async work; throwing keeps the dialog open and shows the message.	`() => Promise<void> \| void`	`—`
`→ returns` true on confirm, false on cancel or Esc.	`Promise<boolean>`	`—`

Other exports

Prop	Type	Default
`ConfirmProvider` Renders the shared confirmation dialog for useConfirm().	`{ labels? }`	`—`
`ConfirmDialog` The same dialog, controlled, without the hook.	`ConfirmOptions & { open, onResult }`	`—`
`AlertDialogBody / AlertDialogFooter / AlertDialogIcon` Body for extra content, footer for buttons, icon well.	`layout parts`	`—`

Address field

Alert