البناء · جديد

أزرار الدخول الاجتماعي

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

المعاينة

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

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

npx shadcn@latest add @ritla/social-button

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

import { SocialButton } from "@/components/ui/social-button";

<SocialButton provider="google" label="Sign in with Google" render={<a href="/auth/google" />} />

brand بألوان المزوّد (Apple بالأسود)، وcolor محايد. Google متطابق في السمتين. iconOnly مربع 44 بكسل ويبقى label اسمه لقارئات الشاشة.

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

الخاصية	النوع	الافتراضي	الوصف
`provider`	`"google" \| "apple"`		خاصية Social.
`label`	`string`		مطلوب. النص الظاهر، أو اسم الزر مع `iconOnly`. اكتب اسم المزوّد بالحروف اللاتينية.
`theme`	`"brand" \| "color"`	`"brand"`	خاصية Theme.
`iconOnly`	`boolean`	`false`	خاصية Only icon.
`render`	`ReactElement`		رابط إعادة التوجيه لـOAuth بشكل الزر، يحتفظ بدلالته.

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

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

الشعار زخرفي؛ الاسم هو النص «تسجيل الدخول باستخدام Google»، أو label في وضع الأيقونة وحدها.
اسم المزوّد داخل <bdi dir="ltr"> تلقائياً، فلا تتقلب علامات الترقيم حوله في العربية.

الشعارات لا تنعكس أبداً، واسم المزوّد لا يُترجم ولا يُكتب بالعربية («Google» لا «جوجل»).

الأرقام: لا أرقام في هذه الأزرار.
الخط العربي: body-16 بوزن Semibold، بارتفاع 44 بكسل يتسع للعربية.
النص ثنائي الاتجاه: «تسجيل الدخول باستخدام Google»: الاسم اللاتيني معزول، فيبقى في آخر السطر كما يُقرأ.