زر عائم
FloatingButtonزر إجراء عائم (FAB) في React للإجراء الرئيسي الوحيد في الشاشة: أيقونة فقط أو حبّة ممتدة، على سطح عادي أو ملوّن، مع asChild للروابط. يراعي الاتجاه العربي.
يبرز FloatingButton الإجراء الأهم في الشاشة. الخاصية icon مطلوبة، وأضف children لعرض نص بجانب الأيقونة. تحديد الموضع مسؤوليتك.
متى تستخدمه
استخدم FloatingButton حين يكون في الشاشة إجراء واحد مهيمن يجب أن يبقى في المتناول أثناء التمرير، مثل بدء طلب جديد في بوابة للمستفيدين. اكتفِ بزر عائم واحد في الشاشة. إن كان الإجراء تابعًا لنموذج أو بطاقة فاستخدم Button.
المكوّن لا يحدّد موضعه بنفسه. ضعه في تخطيطك بحيث لا يغطّي المحتوى ولا شريط التنقّل السفلي في الجوال.
أمثلة
الخصائص
الخصائص التي يعرّفها FloatingButton. سمات العنصر الأصلي تمرّ كما هي.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
variant | "primary" | "secondary" | "black" | ||
size | "sm" | "lg" | ||
onColor | boolean | ||
iconإلزامي | react.ReactNode | Lead action glyph, rendered at 24px (e.g. a plus for "create"). | |
children | react.ReactNode | Optional label. Present → an extended pill (icon + label, gap 8); omit →
a circular icon-only FAB (then provide an aria-label). | |
iconFlip | boolean | Flip the icon horizontally in RTL (for directional glyphs). | |
asChild | boolean | Render as the single child element instead of a <button>, to compose with
router links: <FloatingButton asChild icon={…}><a href="…" /></FloatingButton>.
type and native disabled are dropped; disabled then relies on
aria-disabled + tabIndex={-1} (consumer must still gate the action). |
إمكانية الوصول
الأيقونة icon زخرفية، لذا يجب أن يحمل الزر العائم ذو الأيقونة فقط aria-label يسمّي الإجراء. الحبّة الممتدة تستخدم نصّها الظاهر اسمًا متاحًا. تُعرض حالة التعطيل عبر aria-disabled ليبقى العنصر قابلًا للاكتشاف.
لأن الزر عائم، تأكّد أنه لا يغطّي محتوى قابلًا للتركيز وأن تباينه كافٍ فوق السطح الذي خلفه.