رابط
Linkرابط نصي متاح الوصول في React، بـ 3 درجات وحجمين، مع وضع مضمن ووضع خارجي للمواقع الحكومية السعودية. تنعكس أيقونته النهائية في الاتجاه من اليمين إلى اليسار.
استخدم Link للتنقل وButton للإجراءات. فعّل inline للروابط داخل النص لتبقى مسطّرة، وexternal للروابط الخارجية.
متى تستخدمه
استخدم Link لنقل المستخدم إلى مكان آخر: صفحة أخرى، أو مرساة داخل الصفحة، أو موقع خارجي. واستخدم Button للإجراءات التي تغيّر الحالة.
فعّل inline للروابط داخل الفقرات لتبقى مسطّرة ومقروءة وسط النص. وفعّل external للروابط الخارجية ليعرف المستخدم أنه يغادر الخدمة. تناسب الروابط المستقلة ذات السهم النهائي نمط "عرض الكل" في لوحات التحكم.
أمثلة
الخصائص
الخصائص التي يعرفها Link. سمات العنصر الأصلي تمر كما هي.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
tone | "primary" | "onColor" | "neutral" | 'primary' | Color family (SDGA Style axis). primary (SA green), neutral (gray-700),
onColor (white - for dark/colored surfaces). |
size | "sm" | "md" | 'md' | md = 16/24 + 20px icons, sm = 14/20 + 16px icons. |
inline | boolean | false | Underline always (for links inside running prose - WCAG 1.4.1). When false
the link only underlines on hover/pressed. Set this for any in-text link. |
disabled | boolean | Render the link in its disabled state (aria-disabled, not focusable, not clickable). | |
external | boolean | External link: appends a decorative ↗ icon and sets
rel="noopener noreferrer" (merged with any consumer rel). target is
left to the consumer - forcing _blank is an a11y opinion best owned by
the caller. | |
externalIcon | boolean | true | Show the ↗ icon on an external link. Set false to keep the rel
hardening without the icon (footer and legal links). |
startIcon | react.ReactNode | Leading icon. Decorative - rendered aria-hidden. | |
endIcon | react.ReactNode | Trailing icon. Decorative. When both external and endIcon are set, the
consumer's endIcon wins (the auto ↗ is suppressed). | |
iconFlip | boolean | Flip start/end icons horizontally in RTL (for directional arrows/chevrons). | |
asChild | boolean | Render as the single child element instead of an <a>. Lets consumers
compose with framework routers (<Link asChild><RouterLink to="…">…</RouterLink></Link>). |
إمكانية الوصول
يعرض Link عنصر <a> أصلياً، لذا يمكن الوصول إليه بلوحة المفاتيح وتعلنه التقنيات المساعدة رابطاً. تظهر الروابط الخارجية مؤشراً بصرياً، وأيقونته aria-hidden. لذلك أضف السياق في نص الرابط حين تكون الوجهة غير واضحة.
تنعكس الأيقونات الاتجاهية في الاتجاه من اليمين إلى اليسار ليبقى السهم مشيراً إلى اتجاه القراءة. اكتب نص رابط يصف الوجهة، وتجنب عبارة "اضغط هنا".