Alert Dialog

Installation

Copy editable source into an initialized application:

pnpm dlx @simurgh-ui/cli add alert-dialog

For package consumption, import from the component subpath and load its optional recipe CSS:

React

import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
} from '@simurgh-ui/react/alert-dialog';
import '@simurgh-ui/styles/alert-dialog.css';

Vue

import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
} from '@simurgh-ui/vue/alert-dialog';
import '@simurgh-ui/styles/alert-dialog.css';

Angular

import {
  AlertDialogComponent,
  AlertDialogActionDirective,
  AlertDialogCancelDirective,
} from '@simurgh-ui/angular/alert-dialog';
import '@simurgh-ui/styles/alert-dialog.css';

Omit the component stylesheet for fully headless styling. CLI-copied components use the local path written to simurgh.json and the copied application styles instead of these package imports.

Purpose

Alert Dialog interrupts a workflow to confirm an important or destructive action. It focuses the safe cancel action when opened, contains keyboard focus, and restores focus to its trigger after dismissal.

Default presentation: styled

The optional component stylesheet provides a complete default recipe, including visual hierarchy and interaction states. Consumers can override semantic tokens or omit the recipe.

Basic usage

Live component Alert Dialog

Anatomy

The public component parts are listed in API surface below. Use only the parts needed by the example; compound components depend on their documented parent/child nesting.

State model

Controlled state remains the application’s source of truth and must be updated from every change event. Uncontrolled state reads its default only when the component mounts. Do not pass both forms of the same state at once.

Framework	Exact state contract and reset behavior
React	Controlled: `open` + `onOpenChange`. Uncontrolled: `defaultOpen`. Reset controlled state by assigning the initial value; reset uncontrolled state by changing a React `key`.
Vue	Controlled: `v-model:open` (`open` + `update:open`). Uncontrolled: `defaultOpen`. Reset the model ref to its initial value; reset uncontrolled state with a changed Vue `:key`.
Angular	No public two-way state binding is exposed.

React

const initialOpen = false;
const [open, setOpen] = useState(initialOpen);
const [resetKey, setResetKey] = useState(0);

<AlertDialog open={open} onOpenChange={setOpen}>…</AlertDialog>
<button onClick={() => setOpen(initialOpen)}>Reset controlled</button>
<AlertDialog key={resetKey} defaultOpen={initialOpen}>…</AlertDialog>
<button onClick={() => setResetKey((key) => key + 1)}>Reset uncontrolled</button>

Vue

<script setup lang="ts">
import { ref } from 'vue';
const initial = false;
const state = ref(initial);
const resetKey = ref(0);
</script>

<AlertDialog v-model:open="state">…</AlertDialog>
<button @click="state = initial">Reset controlled</button>
<AlertDialog :key="resetKey" :defaultOpen="initial">…</AlertDialog>
<button @click="resetKey++">Reset uncontrolled</button>

Reserve Alert Dialog for decisions that genuinely require interruption. Use Dialog for ordinary modal content and Alert for nonmodal status messages.

Examples

<AlertDialog>
  <AlertDialogTrigger>Delete project</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogTitle>Delete project?</AlertDialogTitle>
    <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
    <AlertDialogCancel>Cancel</AlertDialogCancel>
    <AlertDialogAction onClick={removeProject}>Delete</AlertDialogAction>
  </AlertDialogContent>
</AlertDialog>

<AlertDialog>
  <AlertDialogTrigger>Delete project</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogTitle>Delete project?</AlertDialogTitle>
    <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
    <AlertDialogCancel>Cancel</AlertDialogCancel>
    <AlertDialogAction @select="removeProject">Delete</AlertDialogAction>
  </AlertDialogContent>
</AlertDialog>

<simurgh-alert-dialog #dialog labelledBy="delete-title" describedBy="delete-description">
  <button trigger (click)="dialog.show()">Delete project</button>
  <h2 id="delete-title">Delete project?</h2>
  <p id="delete-description">This action cannot be undone.</p>
  <button simurghAlertDialogCancel>Cancel</button>
  <button simurghAlertDialogAction (action)="removeProject()">Delete</button>
</simurgh-alert-dialog>

Keyboard interactions

These keys describe behavior implemented by the adapters. Native Tab, Enter, and Space behavior still applies to descendant links, buttons, and form controls unless the component overrides it.

Concern / keys	Behavior
Focus entry and exit (Tab / Shift+Tab)	Tab enters the open dialog and cycles within it; closing restores the trigger.
Navigation and activation	Enter or Space activates the focused action or cancel button.
Escape	Closes the dialog and restores trigger focus.
RTL differences	No RTL-specific key mapping.
Typeahead	Not supported.

Accessibility

Preserve the documented composition and accessible names when wrapping or restyling this component. See accessibility and RTL guidance for keyboard, focus, labeling, and directionality requirements.

API surface

React exports: AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel
Vue exports: AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel
Angular exports: AlertDialogComponent, AlertDialogActionDirective, AlertDialogCancelDirective

Import these public symbols from the component subpath shown in Installation. Framework-specific props, events, slots, directives, methods, defaults, and native-attribute behavior belong in the API tables on this page; use the linked source only to verify the current implementation.

React API reference

React

An inherited-attributes entry means the component accepts the complete named React native interface, including its event handlers and ARIA and data attributes. Remaining attributes are forwarded to the rendered element unless the component behavior described on this page overrides them.

`AlertDialog`

Complete props type: PropsWithChildren<OpenProps>.

Prop	Type	Default / requirement
`children`	`ReactNode`	`undefined`
`defaultOpen`	`boolean`	`undefined`
`onOpenChange`	`(open: boolean) => void`	`undefined`
`open`	`boolean`	`undefined`

`AlertDialogTrigger`

Inherited attributes: ButtonHTMLAttributes<HTMLButtonElement> & RefAttributes<HTMLButtonElement>.

Prop	Type	Default / requirement
`children`	`ReactNode`	`undefined`
`ref`	`Ref<HTMLButtonElement> \| undefined`	`undefined`

`AlertDialogContent`

Inherited attributes: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>.

Prop	Type	Default / requirement
`children`	`ReactNode`	`undefined`
`ref`	`Ref<HTMLDivElement> \| undefined`	`undefined`

`AlertDialogTitle`

Inherited attributes: HTMLAttributes<HTMLHeadingElement>.

Prop	Type	Default / requirement
`children`	`ReactNode`	`undefined`

`AlertDialogDescription`

Inherited attributes: HTMLAttributes<HTMLParagraphElement>.

Prop	Type	Default / requirement
`children`	`ReactNode`	`undefined`

`AlertDialogAction`

Inherited attributes: ButtonHTMLAttributes<HTMLButtonElement>.

Prop	Type	Default / requirement
`children`	`ReactNode`	`undefined`

`AlertDialogCancel`

Inherited attributes: ButtonHTMLAttributes<HTMLButtonElement>.

Prop	Type	Default / requirement
`children`	`ReactNode`	`undefined`

Vue API reference

Vue

Boolean props without explicit defaults use Vue’s false default. Undeclared attributes follow the fallthrough behavior stated for each component.