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

دیالوگ مودالی که کاربر را با محتوای مهم متوقف می‌کند و انتظار پاسخ دارد. برای تأیید عملیات‌های حساس مانند حذف مناسب است.

نصب (Installation)

1npx @quark-lab/rad-ui add alert-dialog

نمونه‌ها (Examples)

نمونه پایه (Basic)

دیالوگ هشدار ساده با عنوان، توضیحات و دکمه‌های انصراف و ادامه

مشاهده کد

1import {
2  AlertDialog,
3  AlertDialogAction,
4  AlertDialogCancel,
5  AlertDialogContent,
6  AlertDialogDescription,
7  AlertDialogFooter,
8  AlertDialogHeader,
9  AlertDialogTitle,
10  AlertDialogTrigger,
11} from "@/components/ui/alert-dialog";
12import { Button } from "@/components/ui/button";
13
14export function AlertDialogDemo() {
15  return (
16    <AlertDialog>
17      <AlertDialogTrigger asChild>
18        <Button variant="outline">نمایش دیالوگ</Button>
19      </AlertDialogTrigger>
20      <AlertDialogContent>
21        <AlertDialogHeader>
22          <AlertDialogTitle>آیا مطمئن هستید؟</AlertDialogTitle>
23          <AlertDialogDescription>
24            این عملیات قابل بازگشت نیست. این کار حساب شما را به طور دائمی
25            از سرورهای ما حذف خواهد کرد.
26          </AlertDialogDescription>
27        </AlertDialogHeader>
28        <AlertDialogFooter>
29          <AlertDialogCancel>انصراف</AlertDialogCancel>
30          <AlertDialogAction>ادامه</AlertDialogAction>
31        </AlertDialogFooter>
32      </AlertDialogContent>
33    </AlertDialog>
34  );
35}

اندازه کوچک (Small)

استفاده از prop مقدار size="sm" برای دیالوگ کوچک‌تر

مشاهده کد

1import {
2  AlertDialog,
3  AlertDialogAction,
4  AlertDialogCancel,
5  AlertDialogContent,
6  AlertDialogDescription,
7  AlertDialogFooter,
8  AlertDialogHeader,
9  AlertDialogTitle,
10  AlertDialogTrigger,
11} from "@/components/ui/alert-dialog";
12import { Button } from "@/components/ui/button";
13
14export function SmallAlertDialogDemo() {
15  return (
16    <AlertDialog>
17      <AlertDialogTrigger asChild>
18        <Button variant="outline">نمایش (کوچک)</Button>
19      </AlertDialogTrigger>
20      <AlertDialogContent size="sm">
21        <AlertDialogHeader>
22          <AlertDialogTitle>ذخیره تغییرات؟</AlertDialogTitle>
23          <AlertDialogDescription>
24            تغییرات ذخیره نشده از بین خواهند رفت.
25          </AlertDialogDescription>
26        </AlertDialogHeader>
27        <AlertDialogFooter>
28          <AlertDialogCancel>انصراف</AlertDialogCancel>
29          <AlertDialogAction>ذخیره</AlertDialogAction>
30        </AlertDialogFooter>
31      </AlertDialogContent>
32    </AlertDialog>
33  );
34}

عملیات مخرب (Destructive)

استفاده از variant مخرب برای دکمه اقدام در عملیات‌های حذف

مشاهده کد

1import {
2  AlertDialog,
3  AlertDialogAction,
4  AlertDialogCancel,
5  AlertDialogContent,
6  AlertDialogDescription,
7  AlertDialogFooter,
8  AlertDialogHeader,
9  AlertDialogTitle,
10  AlertDialogTrigger,
11} from "@/components/ui/alert-dialog";
12import { Button } from "@/components/ui/button";
13
14export function DestructiveAlertDialogDemo() {
15  return (
16    <AlertDialog>
17      <AlertDialogTrigger asChild>
18        <Button variant="destructive">حذف چت</Button>
19      </AlertDialogTrigger>
20      <AlertDialogContent>
21        <AlertDialogHeader>
22          <AlertDialogTitle>حذف چت؟</AlertDialogTitle>
23          <AlertDialogDescription>
24            این چت برای همیشه حذف خواهد شد. این عملیات قابل بازگشت نیست.
25          </AlertDialogDescription>
26        </AlertDialogHeader>
27        <AlertDialogFooter>
28          <AlertDialogCancel>انصراف</AlertDialogCancel>
29          <AlertDialogAction variant="destructive">حذف</AlertDialogAction>
30        </AlertDialogFooter>
31      </AlertDialogContent>
32    </AlertDialog>
33  );
34}

مرجع API (API Reference)

AlertDialog

پراپ (Prop)	نوع (Type)	پیش‌فرض (Default)	توضیحات (Description)
`open`	`boolean`	`undefined`	وضعیت باز/بسته بودن (کنترل‌شده)
`defaultOpen`	`boolean`	`false`	وضعیت پیش‌فرض (غیرکنترل‌شده)
`onOpenChange`	`(open: boolean) => void`	`undefined`	تابع فراخوانی هنگام تغییر وضعیت

AlertDialogContent

پراپ (Prop)	نوع (Type)	پیش‌فرض (Default)	توضیحات (Description)
`size`	`"default" \| "sm"`	`"default"`	اندازه دیالوگ (پیش‌فرض یا کوچک)
`onEscapeKeyDown`	`(event: KeyboardEvent) => void`	`undefined`	هندلر فشردن کلید Escape

دسترسی‌پذیری (Accessibility)

کیبورد (Keyboard)

Escape - بستن دیالوگ و بازگشت فوکوس به تریگر
Tab - حرکت بین المان‌های قابل فوکوس داخل دیالوگ
Shift + Tab - حرکت به عقب بین المان‌ها

الگوی ARIA

این کامپوننت از الگوی Alert and Message Dialogs پیروی می‌کند. عنوان و توضیحات برای اعلان به صفحه‌خوان استفاده می‌شوند.

تله فوکوس (Focus Trap)

وقتی دیالوگ باز است، فوکوس در داخل آن محبوس می‌شود تا کاربر حتماً یکی از اقدامات را انتخاب کند.

بهترین شیوه‌ها (Best Practices)

استفاده برای تأیید (Use for Confirmation)

دیالوگ هشدار برای عملیات‌هایی که نیاز به تأیید صریح کاربر دارند طراحی شده است (مثل حذف، خروج بدون ذخیره). برای محتوای اطلاع‌رسانی از Dialog استفاده کنید.

عنوان و توضیح روشن (Clear Title & Description)

از AlertDialogTitle و AlertDialogDescription استفاده کنید تا کاربر دقیقاً بداند چه عملیاتی در حال تأیید است و عواقب آن چیست.

تمایز دکمه انصراف و اقدام (Distinguish Cancel vs Action)

دکمه انصراف (AlertDialogCancel) معمولاً با variant="outline" و دکمه اقدام اصلی با variant پیش‌فرض یا "destructive" برای عملیات‌های مخرب نمایش داده می‌شود.

نحوه استفاده (Usage)

1import {
2  AlertDialog,
3  AlertDialogAction,
4  AlertDialogCancel,
5  AlertDialogContent,
6  AlertDialogDescription,
7  AlertDialogFooter,
8  AlertDialogHeader,
9  AlertDialogTitle,
10  AlertDialogTrigger,
11} from "@/components/ui/alert-dialog";
12import { Button } from "@/components/ui/button";
13
14<AlertDialog>
15  <AlertDialogTrigger asChild>
16    <Button variant="outline">نمایش دیالوگ</Button>
17  </AlertDialogTrigger>
18  <AlertDialogContent>
19    <AlertDialogHeader>
20      <AlertDialogTitle>آیا مطمئن هستید؟</AlertDialogTitle>
21      <AlertDialogDescription>
22        این عملیات قابل بازگشت نیست. این کار حساب شما را به طور دائمی
23        از سرورهای ما حذف خواهد کرد.
24      </AlertDialogDescription>
25    </AlertDialogHeader>
26    <AlertDialogFooter>
27      <AlertDialogCancel>انصراف</AlertDialogCancel>
28      <AlertDialogAction>ادامه</AlertDialogAction>
29    </AlertDialogFooter>
30  </AlertDialogContent>
31</AlertDialog>