البناء · جديد

الزر

زر الإجراء الرئيسي بخمسة أنماط وأربعة أحجام، مع نسخة للإجراءات الخطرة وحالة تحميل. أيقوناته الاتجاهية تنعكس في العربية وحدها.

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

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

npx shadcn@latest add @ritla/button

الاعتماديات التي يضيفها: @base-ui/react, @phosphor-icons/react

الاستخدام

import { ArrowRightIcon } from "@phosphor-icons/react/ssr";
import { Button } from "@/components/ui/button";

<Button variant="outline">Cancel</Button>
<Button iconTrailing={ArrowRightIcon}>Continue</Button>
<Button isDanger>Delete project</Button>

أمثلة

الأنماط

filled للإجراء الرئيسي، زر واحد لكل شاشة. tonal لإجراء ثانوي قوي، outline للبدائل مثل «إلغاء»، ghost للإجراءات الخفيفة، وinverted-ghost على الأسطح الملونة. isDanger يحوّل أي نمط إلى الأحمر.

الأحجام

lg ‏56 بكسل (الافتراضي)، md ‏48 للنماذج، sm ‏40 للجداول والمرشحات، xs ‏32 للواجهات الكثيفة. مساحة النقر تبقى 48 بكسل على الأقل في كل الأحجام.

الحالات

المرور والضغط والتركيز تأتي من الفأرة ولوحة المفاتيح. loading يضع المؤشر مكان الأيقونة الأولى ويُبقي التركيز على الزر، وdisabled يوقفه. اضغط «حفظ».

الأيقونات

iconLeading وiconTrailing اختياريان. «التالي» يستخدم ArrowRightIcon في اللغتين ويُقلب في العربية ليشير إلى الأمام؛ أيقونة التنزيل لا تنعكس.

ترتيب الإجراءات

الإجراء الرئيسي عند نهاية السطر والبديل قبله. في العربية ينعكس الصف كله، فيبقى الرئيسي عند النهاية (اليسار). للإجراءات الخطرة نص محدد، لا «موافق».

رابط بشكل زر

التنقل يبقى رابطاً حتى لو بدا زراً: مرّر render={<a href=… />} أو <Link> من Next. يأخذ شكل الزر ويبقى رابطاً لقارئات الشاشة.

مرجع الخصائص

Button

أي خاصية أخرى من Base UI Button تمر كما هي (onClick، type…).

الخاصية	النوع	الافتراضي	الوصف
`variant`	`"filled" \| "tonal" \| "outline" \| "ghost" \| "inverted-ghost"`	`"filled"`	خاصية Style في Figma (الاسم `style` محجوز في React).
`size`	`"lg" \| "md" \| "sm" \| "xs"`	`"lg"`	خاصية Size: ‏56 و48 و40 و32 بكسل.
`isDanger`	`boolean`	`false`	خاصية isDanger: الأحمر للإجراءات الخطرة، مع حلقة تركيز حمراء.
`children`	`ReactNode`		خاصية Label: نص الزر.
`iconLeading`	`IconComponent`		Icon leading: أيقونة Phosphor أو كنز في بداية السطر.
`iconTrailing`	`IconComponent`		Icon trailing: أيقونة في نهاية السطر.
`loading`	`boolean`	`false`	State = Loading: مؤشر مكان الأيقونة الأولى، `aria-busy`، الزر يبقى قابلاً للتركيز ويتجاهل الضغط.
`disabled`	`boolean`	`false`	State = Disabled.
`render`	`ReactElement`		عنصر آخر بشكل الزر، عادةً رابط (`<a>` أو `<Link>`). يحتفظ بدلالته، فلا يُعلن زراً.
`className`	`string`		أصناف إضافية تُدمج عبر `cn()`، مثل `w-full`.

إمكانية الوصول

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Tab`	ينقل التركيز إلى الزر، وتظهر حلقة التركيز (حمراء مع `isDanger`).
`EnterSpace`	ينفّذ الإجراء. أثناء التحميل يبقى التركيز ولا يتكرر الإجراء.

ARIA

عنصر <button> أصلي (أو <a> مع render)، فلا حاجة لـrole.
التحميل يضبط aria-busy="true" وaria-disabled="true" بدل disabled، فلا يضيع التركيز ويعلن قارئ الشاشة الحالة. غيّر النص أيضاً («جارٍ الحفظ»).
الأيقونات زخرفية؛ النص هو الاسم. الأزرار التي لا تحوي إلا أيقونة تأتي في مكوّن Icon Button.
مساحة النقر 48 بكسل على الأقل حتى في sm وxs (WCAG 2.5.8).

ملاحظات العربية والاتجاه

ينعكس

الأيقونة الأولى في بداية السطر (اليمين في العربية) والأخيرة في نهايته، دون أي خاصية RTL.
الأسهم والأسهم المثلثة تنعكس عبر <Icon>: «التالي» يشير إلى اليسار في العربية.
ترتيب الإجراءات ينعكس: الرئيسي عند نهاية السطر في الاتجاهين.

لا ينعكس

مؤشر التحميل يدور في اتجاه عقارب الساعة في اللغتين.
علامات الصح والتنزيل والشعارات داخل الأزرار لا تنعكس.

الأرقام: الأرقام داخل النص («حذف 3 ملفات») تتبع إعداد الأرقام عبر formatNumber، لا الزر.
الخط العربي: النص بنمط body-16 (وbody-14 في xs) بوزن Semibold؛ ارتفاع الزر ثابت، ونص العربية يتسع فيه دون قص.
النص ثنائي الاتجاه: اسم لاتيني داخل نص عربي («تسجيل الدخول عبر Google») يوضع في <bdi> كي لا تنتقل علامات الترقيم.

كل المكونات ›