Alert Dialog

نصب

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

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

Vue همین partها را صادر می‌کند. Angular از AlertDialogComponent، AlertDialogActionDirective و AlertDialogCancelDirective استفاده می‌کند.

پیش‌نمایش واقعی

Live component Alert Dialog ◆

Delete project

React

<AlertDialog>
  <AlertDialogTrigger>حذف پروژه</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogTitle>پروژه حذف شود؟</AlertDialogTitle>
    <AlertDialogDescription>
      این عمل قابل‌بازگشت نیست.
    </AlertDialogDescription>
    <AlertDialogCancel>انصراف</AlertDialogCancel>
    <AlertDialogAction onClick={removeProject}>حذف</AlertDialogAction>
  </AlertDialogContent>
</AlertDialog>

Angular

<simurgh-alert-dialog
  #dialog
  labelledBy="delete-title"
  describedBy="delete-description"
>
  <button trigger (click)="dialog.show()">حذف پروژه</button>
  <h2 id="delete-title">پروژه حذف شود؟</h2>
  <p id="delete-description">این عمل قابل‌بازگشت نیست.</p>
  <button simurghAlertDialogCancel>انصراف</button>
  <button simurghAlertDialogAction (action)="removeProject()">حذف</button>
</simurgh-alert-dialog>

focus و صفحه‌کلید

focus اولیه روی Cancel امن قرار می‌گیرد. Tab و Shift+Tab داخل modal می‌چرخند؛ Escape آن را می‌بندد و focus به trigger برمی‌گردد. همیشه Cancel قابل‌مشاهده ارائه دهید و Escape را تنها مسیر امن خروج قرار ندهید.

Alert Dialog برای تصمیم مهم یا مخرب است. برای محتوای modal عمومی از Dialog و برای پیام غیرمسدودکننده از Alert استفاده کنید.

Last verified on 2026-08-13 against Simurgh registry 0.1.1.