الإشعارات والحالة

import"@truvar-ai/design-system"

الإشعارات والحالة

أخبر الناس بما حدث بكلمات بسيطة وبالقدر المناسب: إشعارات منبثقة للتأكيدات العابرة، وتنبيهات لما يحتاج انتباهًا، ونوافذ فقط عند الحاجة إلى قرار.

الإشعارات المنبثقة

مبني على ToastQueue + ToastRegion

تتراكم أسفل نهاية الشاشة، وتتوقف عند المرور أو التركيز، وتُعلن لقارئات الشاشة. مفتاح F6 ينقلك إليها.

مركز الإشعارات

مبني على DialogTrigger + Popover + GridList

نفس المكوّن موجود في الشريط العلوي، ويُعلن العدد مع اسم الزر.

افتح الجرس

شريط التقدم

مبني على ProgressBar

محدد عندما تعرف المتبقي، وغير محدد عندما لا تعرفه.

جارٍ رفع q3-contacts.csv٠٪؜
مطابقة السجلات المكررة
جارٍ البحث

مقياس

مبني على Meter

كمية معروفة ضمن نطاق، يتحول إلى تحذير ثم خطر ويقول ذلك بالكلمات.

المقاعد المستخدمة٣٤ من ٥٠
مساحة التخزين٨١٪؜ · تقترب من الامتلاء
رصيد الذكاء الاصطناعي٩٢٪؜ · على وشك النفاد

الشارات

مبني على span

تسميات حالة قصيرة، دائمًا بكلمة وليس باللون وحده.

عميل جديدمؤهلعرض مُرسلتفاوضتم الفوزخسارة

هيكل التحميل

مبني على div (aria-hidden)

يعرض شكل المحتوى القادم، مع منطقة مشغولة لتعرف قارئات الشاشة.

حالة فارغة

مبني على div

الشاشة الفارغة دعوة لاتخاذ إجراء.

لا توجد تقارير بعد

التقارير تحول بيانات عملائك إلى رسالة أسبوعية يقرؤها فريقك فعلًا.