البناء · جديد

بطاقة الزر

بطاقة كبيرة قابلة للضغط تنفّذ إجراءً واحداً: اختصارات الإعدادات، وخيارات البداية، وإجراءات لوحة التحكم. العنوان هو اسمها لقارئات الشاشة.

المعاينة

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

التثبيت

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

npx shadcn@latest add @ritla/button-card

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

الاستخدام

import { BellIcon } from "@phosphor-icons/react/ssr";
import { ButtonCard } from "@/components/ui/button-card";

<ButtonCard
  leadingIcon={BellIcon}
  headline="Notifications"
  supportingText="Email, push and SMS"
  onClick={openNotifications}
/>

أمثلة

أنواع البطاقة

horizontal (الافتراضي) بسهم في نهاية السطر، وvertical في المنتصف، وvertical-wide من بداية السطر، وbig-wide بتذييل فيه سهم وشعار. العرض يأتي من التخطيط.

خيارات البداية

بطاقات عمودية لخيارات متوازية؛ كل بطاقة تنفّذ إجراءً واحداً وتنقل إلى الخطوة التالية. اضغط أحدها.

إجراءات لوحة التحكم

بطاقات big-wide مع شعار. المبالغ والأعداد تتبع إعداد الأرقام، والسهم ينعكس في العربية والشعار لا.

الروابط والتعطيل

البطاقة التي تنقل إلى صفحة رابط: مرّر render={<a href=… />}. disabled يوقفها؛ اكتب السبب في النص المساند.

مرجع الخصائص

ButtonCard

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

الخاصية	النوع	الافتراضي	الوصف
`cardType`	`"horizontal" \| "vertical" \| "vertical-wide" \| "big-wide"`	`"horizontal"`	خاصية Card type.
`headline`	`ReactNode`		مطلوب. Headline، واسم البطاقة لقارئات الشاشة.
`overline`	`ReactNode`		Overline: سطر صغير فوق العنوان، يظهر إن مُرّر.
`supportingText`	`ReactNode`		Supporting text: الوصف الذي تقرؤه قارئات الشاشة بعد الاسم.
`leadingIcon`	`IconComponent`		Leading icon. لا يظهر في `big-wide`، كما في Figma.
`trailingIcon`	`IconComponent \| null`	`CaretRightIcon / ArrowRightIcon`	السهم في نهاية البطاقة، ينعكس في العربية. `null` يخفيه.
`logo`	`ReactNode`		شعار تذييل `big-wide` في نهاية السطر. لا ينعكس.
`disabled`	`boolean`	`false`	State = Disabled.
`render`	`ReactElement`		رابط بشكل البطاقة (`<a>` أو `<Link>`)، يحتفظ بدلالته.
`className`	`string`		أصناف إضافية، مثل العرض (`w-160`).

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

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

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

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

ARIA

زر أصلي (أو رابط مع render)؛ aria-labelledby يشير إلى العنوان فيكون الاسم قصيراً، وaria-describedby إلى السطر العلوي والنص المساند.
الأيقونات والشعار زخرفية داخل البطاقة؛ مرّر label={null} لشعار كنز.
بطاقة واحدة لإجراء واحد: لا تضع أزراراً أو روابط داخلها.

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

ينعكس

البطاقة كلها تنعكس: الأيقونة في بداية السطر (اليمين) والسهم في نهايته (اليسار)، والنص يبدأ من اليمين.
CaretRight وArrowRight ينعكسان عبر <Icon> فيشيران إلى الأمام في اللغتين.

لا ينعكس

الشعارات لا تنعكس أبداً، ولا الأيقونات غير الاتجاهية (الجرس، الترس).

الأرقام: المبالغ والأعداد في النصوص («ادفع 3 فواتير») تُنسّق بـformatNumber وتتبع إعداد الأرقام.
الخط العربي: السطر العلوي label-12، والعنوان body-16 بوزن Medium، والنص المساند body-12. البطاقة تتسع لطول النص فلا يُقص العربي.
النص ثنائي الاتجاه: رمز العملة أو اسم لاتيني داخل نص عربي («1840 ريال»، «عبر Apple Pay») يُعرض صحيحاً؛ المعرّفات في <bdi dir="ltr">.

كل المكونات ›