هشدار (Alert)
نمایش یک callout برای جلب توجه کاربر. با پشتیبانی از انواع پیشفرض و مخرب، اقدام اختیاری و RTL.
نصب (Installation)
1npx @quark-lab/rad-ui add alertنمونهها (Examples)
نمونه پایه (Basic)
هشدار ساده با آیکون، عنوان و توضیحات.
حساب بهروزرسانی شد
اطلاعات پروفایل شما ذخیره شد. تغییرات بلافاصله اعمال میشوند.
مشاهده کد
1import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
2import { CheckCircle2 } from "lucide-react";
3
4export default function BasicAlert() {
5 return (
6 <Alert>
7 <CheckCircle2 className="h-4 w-4" />
8 <AlertTitle>حساب بهروزرسانی شد</AlertTitle>
9 <AlertDescription>
10 اطلاعات پروفایل شما ذخیره شد. تغییرات بلافاصله اعمال میشوند.
11 </AlertDescription>
12 </Alert>
13 );
14}مخرب (Destructive)
برای پیامهای خطا از variant="destructive" استفاده کنید.
پرداخت ناموفق
پرداخت شما انجام نشد. لطفاً روش پرداخت را بررسی کرده و دوباره تلاش کنید.
مشاهده کد
1import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
2import { AlertCircle } from "lucide-react";
3
4export default function DestructiveAlert() {
5 return (
6 <Alert variant="destructive">
7 <AlertCircle className="h-4 w-4" />
8 <AlertTitle>پرداخت ناموفق</AlertTitle>
9 <AlertDescription>
10 پرداخت شما انجام نشد. لطفاً روش پرداخت را بررسی کرده و دوباره تلاش کنید.
11 </AlertDescription>
12 </Alert>
13 );
14}با اقدام (Action)
با AlertAction میتوان دکمه یا اقدام را در گوشه هشدار قرار داد.
حالت تاریک در دسترس است
میتوانید آن را در تنظیمات پروفایل خود فعال کنید.
مشاهده کد
1import {
2 Alert,
3 AlertAction,
4 AlertDescription,
5 AlertTitle,
6} from "@/components/ui/alert";
7import { Button } from "@/components/ui/button";
8import { Info } from "lucide-react";
9
10export default function AlertWithAction() {
11 return (
12 <Alert>
13 <Info className="h-4 w-4" />
14 <AlertTitle>حالت تاریک در دسترس است</AlertTitle>
15 <AlertDescription>
16 میتوانید آن را در تنظیمات پروفایل خود فعال کنید.
17 </AlertDescription>
18 <AlertAction>
19 <Button variant="outline" size="sm">فعالسازی</Button>
20 </AlertAction>
21 </Alert>
22 );
23}رنگهای سفارشی (Custom Colors)
با افزودن کلاسهایی مثل bg-amber-50 میتوان رنگ هشدار را سفارشی کرد.
اشتراک شما تا ۳ روز دیگر منقضی میشود
برای جلوگیری از قطع سرویس همین حالا تمدید کنید یا به طرح پولی ارتقا دهید.
مشاهده کد
1import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
2import { AlertTriangle } from "lucide-react";
3
4export default function CustomColorsAlert() {
5 return (
6 <Alert className="bg-amber-50 dark:bg-amber-950 border-amber-200 dark:border-amber-800 text-amber-900 dark:text-amber-100 [&>svg]:text-amber-600 dark:[&>svg]:text-amber-400">
7 <AlertTriangle className="h-4 w-4" />
8 <AlertTitle>اشتراک شما تا ۳ روز دیگر منقضی میشود</AlertTitle>
9 <AlertDescription>
10 برای جلوگیری از قطع سرویس همین حالا تمدید کنید یا به طرح پولی ارتقا
11 دهید.
12 </AlertDescription>
13 </Alert>
14 );
15}مرجع API (API Reference)
Alert
کانتینر اصلی هشدار با نقش role="alert" برای دسترسیپذیری.
| پراپ (Prop) | نوع (Type) | پیشفرض (Default) | توضیحات (Description) |
|---|---|---|---|
variant | "default" | "destructive" | "default" | نوع هشدار: پیشفرض یا مخرب (برای خطاها). |
className | string | - | کلاسهای CSS سفارشی |
AlertTitle
عنوان هشدار.
| پراپ (Prop) | نوع (Type) | پیشفرض (Default) | توضیحات (Description) |
|---|---|---|---|
className | string | - | کلاسهای CSS سفارشی |
AlertDescription
توضیحات یا محتوای متنی هشدار.
| پراپ (Prop) | نوع (Type) | پیشفرض (Default) | توضیحات (Description) |
|---|---|---|---|
className | string | - | کلاسهای CSS سفارشی |
AlertAction
المان اقدام (مثل دکمه) که در گوشه بالای هشدار قرار میگیرد.
| پراپ (Prop) | نوع (Type) | پیشفرض (Default) | توضیحات (Description) |
|---|---|---|---|
className | string | - | کلاسهای CSS سفارشی |
دسترسیپذیری (Accessibility)
نقش alert
کامپوننت اصلی از role="alert" استفاده میکند تا خوانندگان صفحه از وجود پیام مهم مطلع شوند.
پشتیبانی RTL
از کلاسهای منطقی مانند ms-2 و end-4 برای فاصله آیکون و موقعیت AlertAction استفاده شده تا در جهت راستبهچپ درست نمایش داده شود.
بهترین شیوهها (Best Practices)
چه زمانی از Alert استفاده کنیم؟
- پیامهای موفقیت یا تأیید (مثلاً پس از ذخیره فرم).
- هشدارهای خطا یا پرداخت ناموفق.
- اطلاعرسانی درباره ویژگی جدید یا انقضای اشتراک.
variant مخرب
برای خطاها یا پیامهای منفی از variant="destructive" استفاده کنید تا از توکنهای تم destructive برای رنگ و پسزمینه بهره ببرید.
عنوان و توضیح
عنوان را کوتاه و واضح نگه دارید و جزئیات را در AlertDescription قرار دهید.
نحوه استفاده (Usage)
1import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
2import { CheckCircle2, AlertCircle } from "lucide-react";
3
4export default function UsageExample() {
5 return (
6 <div className="space-y-4">
7 <Alert>
8 <CheckCircle2 className="h-4 w-4" />
9 <AlertTitle>عملیات موفق</AlertTitle>
10 <AlertDescription>
11 پرداخت شما انجام شد. رسید به ایمیل شما ارسال شده است.
12 </AlertDescription>
13 </Alert>
14 <Alert variant="destructive">
15 <AlertCircle className="h-4 w-4" />
16 <AlertTitle>خطا</AlertTitle>
17 <AlertDescription>
18 مشکلی پیش آمده. لطفاً دوباره تلاش کنید یا با پشتیبانی تماس بگیرید.
19 </AlertDescription>
20 </Alert>
21 </div>
22 );
23}مثالهای پیشرفته (Advanced Examples)
رنگهای سفارشی (Custom Colors)
هشدار با رنگ کهربایی برای اخطار انقضای اشتراک.
اشتراک شما تا ۳ روز دیگر منقضی میشود
برای جلوگیری از قطع سرویس همین حالا تمدید کنید یا به طرح پولی ارتقا دهید.
مشاهده کد
1import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
2import { AlertTriangle } from "lucide-react";
3
4export default function CustomColorsAlert() {
5 return (
6 <Alert className="bg-amber-50 dark:bg-amber-950 border-amber-200 dark:border-amber-800 text-amber-900 dark:text-amber-100 [&>svg]:text-amber-600 dark:[&>svg]:text-amber-400">
7 <AlertTriangle className="h-4 w-4" />
8 <AlertTitle>اشتراک شما تا ۳ روز دیگر منقضی میشود</AlertTitle>
9 <AlertDescription>
10 برای جلوگیری از قطع سرویس همین حالا تمدید کنید یا به طرح پولی ارتقا
11 دهید.
12 </AlertDescription>
13 </Alert>
14 );
15}