زر
Buttonزر React متاح الوصول للمنصات الحكومية السعودية: تسعة أنماط، أحجام، أيقونات، حالة تحميل، وخاصية asChild لروابط التوجيه. جاهز للعربية والوضع الداكن.
ينفذ Button إجراءً عند الضغط عليه. اختر variant وsize، وأضف startIcon/endIcon أو loading، واستخدم asChild لعرض رابط بمظهر زر.
متى تستخدمه
استخدم Button لأي إجراء يغير شيئاً: إرسال نموذج، فتح حوار، أو تأكيد خطوة. للانتقال إلى صفحة أخرى، استخدم Link، أو غلف رابط التوجيه بخاصية asChild ليبدو كزر ويبقى رابطاً.
اجعل النمط primary للإجراء الرئيسي الوحيد في الشاشة، واستخدم secondary أو outline للبقية. تنبه أنماط destructive إلى الإجراءات التي لا يمكن التراجع عنها، مثل حذف سجل. في النماذج الحكومية، ضع الإجراء الرئيسي في نهاية الصف ليظهر في الجهة نفسها بالعربية والإنجليزية.
أمثلة
الخصائص
الخصائص التي يعرفها Button. سمات العنصر الأصلي تمر كما هي.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
variant | "primary" | "secondary" | "black" | "outline" | "ghost" | "destructive" | "destructive-outline" | "destructive-subtle" | "destructive-ghost" | ||
size | "sm" | "md" | "lg" | "icon" | "icon-md" | "icon-sm" | "icon-xs" | ||
fullWidth | boolean | ||
onColor | boolean | ||
loading | boolean | ||
startIcon | react.ReactNode | Leading icon. For an icon-only button pass the glyph as children with an icon size and an aria-label. | |
endIcon | react.ReactNode | ||
iconFlip | boolean | Flip start/end icons horizontally in RTL (for chevrons, arrows, etc.) | |
asChild | boolean | Render as the single child element instead of a <button>. Lets consumers
compose Button with router links (<Button asChild><Link href="…">…</Link></Button>)
without <button><a> invalid nesting.
The type and native disabled attributes are dropped in this mode
(they're meaningless on non-button elements) , the disabled visual + a11y
state still works via aria-disabled + tabIndex={-1}. button.css
matches on [aria-disabled='true'] alongside :disabled so the styling
applies on any element.
While disabled or loading, clicks (and Enter, which fires a click on links) are blocked
before the child's own handler runs, so a router link doesn't navigate. |
إمكانية الوصول
يعرض Button عنصر <button> أصلياً، لذا يعمل التركيز ومفتاحا Enter وSpace دون إعداد إضافي. أثناء تفعيل loading، يضبط الزر aria-busy ويتجاهل النقر.
تحتاج الأزرار التي تعرض أيقونة فقط إلى aria-label، لأن الأيقونة وحدها لا تعطي قارئ الشاشة شيئاً يعلنه. في وضع asChild، تظهر حالة التعطيل عبر aria-disabled، ويخرج العنصر من ترتيب التنقل. ومع ذلك، يجب عليك منع الإجراء الأصلي بنفسك. تظهر حلقة تركيز واضحة في الوضعين الفاتح والداكن.