دیالوگ هشدار (Alert Dialog)

معرفی

کامپوننت Alert Dialog برای نمایش پیام‌های مهم و دریافت تایید از کاربر استفاده می‌شود. این دیالوگ تمرکز کاربر را به خود جلب می‌کند و تا زمانی که کاربر پاسخ ندهد، بسته نمی‌شود.

چه زمانی استفاده کنیم:

• برای تأیید اعمال مخرب و غیرقابل بازگشت (حذف حساب، پاک‌سازی داده‌ها)
• وقتی کاربر باید حتماً تصمیم بگیرد و نباید بتواند بدون پاسخ دادن ادامه دهد
• برای هشدارهای بحرانی که نیاز به توجه فوری دارند

چه زمانی استفاده نکنیم:

• برای محتوای غیر destructive — از Dialog استفاده کنید
• برای تأییدهای ساده بدون نیاز به سفارشی‌سازی — از ConfirmDialog استفاده کنید
• برای اعلان‌های گذرا — از Sonner استفاده کنید

استفاده

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@parto-system-design/ui'

export default function MyComponent() {
  return (
    <AlertDialog>
      <AlertDialogTrigger>باز کردن</AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>آیا کاملا مطمئن هستید؟</AlertDialogTitle>
          <AlertDialogDescription>
            این عمل قابل بازگشت نیست. این کار حساب شما را به طور دائم حذف کرده و داده‌های شما را از سرورهای ما پاک
            می‌کند.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>لغو</AlertDialogCancel>
          <AlertDialogAction>ادامه</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

حالت‌ها و انواع

• تأیید حذف داده‌ها — وقتی کاربر می‌خواهد رکوردی را به‌طور دائم حذف کند
• هشدار قبل از اقدامات مهم — مثلاً خروج از حساب یا تغییر تنظیمات حساس
• نمایش پیام‌های بحرانی — خطاهایی که نیاز به تصمیم فوری دارند
• دریافت تأیید کاربر — قبل از ارسال داده‌های حساس

راهنمای استفاده

دسترسی‌پذیری

• دیالوگ مودال با overlay — اسکرول صفحه قفل می‌شود
• مدیریت فوکوس خودکار (focus trap)
• با کلید Escape بسته نمی‌شود (الزام تصمیم‌گیری)
• از role="alertdialog" و aria-modal استفاده می‌شود
• aria-labelledby و aria-describedby برای خوانایی screen readers

جدول ویژگی‌ها

AlertDialog

AlertDialogAction

دکمه عمل اصلی که به صورت خودکار دیالوگ را می‌بندد.

AlertDialogCancel

دکمه لغو که به صورت خودکار دیالوگ را می‌بندد.

کامپوننت‌های مرتبط

• Dialog — برای محتوای غیر destructive
• ConfirmDialog — wrapper ساده‌تر برای تأیید
• راهنمای انتخاب کامپوننت — مقایسه همه overlay ها