زر
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.
Consumer remains responsible for preventing the underlying action when
disabled (e.g., calling e.preventDefault() in the Link's onClick),
since native disabled doesn't gate clicks on non-form-controls. |
إمكانية الوصول
يعرض Button عنصر <button> أصليًا، لذا يعمل التركيز ومفتاحا Enter وSpace دون إعداد إضافي. أثناء loading يضبط الزر aria-busy ويتجاهل النقر.
الأزرار التي تعرض أيقونة فقط تحتاج aria-label، لأن الأيقونة وحدها لا تقول شيئًا لقارئ الشاشة. في وضع asChild تُعرض حالة التعطيل عبر aria-disabled ويخرج العنصر من ترتيب التنقّل، ويبقى عليك منع الإجراء نفسه. تظهر حلقة تركيز واضحة في الوضعين الفاتح والداكن.