التنبيهات

التنبيهات provide contextual feedback messages for typical user actions.

Loading demo: alert-real-world

التثبيت

npx sdaia-ui@latest add alerts

import { Alert } from "@/components/ui/alert"

1<Alert>
2  <AlertTitle>Title</AlertTitle>
3  <AlertDescription>Description</AlertDescription>
4</Alert>

تنبيه أساسي يتضمّن عنواناً ووصفاً.

Loading demo: alert-standard

استخدم `type="خطّي"` لتنبيه محاط بإطار بدون تعبئة خلفية.

Loading demo: alert-outline

استخدم `type="صُلب"` لخلفية عالية التباين. استخدمه باعتدال.

Loading demo: alert-solid

استخدم `state="محايد"` لرسالة للأغراض العامة بدون لون دلالي.

Loading demo: alert-neutral

استخدم `state="معلومات"` للتلميحات أو النصائح أو المعلومات التكميلية.

Loading demo: alert-info

استخدم `state="نجاح"` لتأكيد إجراء أو عملية مكتملة.

Loading demo: alert-success

استخدم `state="تحذير"` للحالات التي قد تحتاج انتباه المستخدم.

Loading demo: alert-warning

استخدم `state="خطأ"` للمشكلات الحرجة التي يجب حلّها.

Loading demo: alert-destructive

خصائص مكوّن Alert.

Prop	Type	Default	Required
type	'standard' \| 'outline' \| 'solid'	'standard'	optional
state	'neutral' \| 'info' \| 'error' \| 'warning' \| 'success'	-	optional
variant	'neutral' \| 'info' \| 'error' \| 'warning' \| 'success'	deprecated	optional
title	string	-	optional
description	string	-	optional
closable	boolean	false	optional
onClose	() => void	-	optional
leadingIcon	ReactNode \| boolean	-	optional
icon	ReactNode	deprecated	optional
actions	ReactNode	-	optional
iconTop	boolean	false	optional
children	ReactNode	-	optional