رابط

Link

رابط نصّي متاح الوصول في React بثلاث درجات وحجمين، مع وضع مضمّن ووضع خارجي للمواقع الحكومية السعودية. تنعكس أيقونته النهائية في الاتجاه العربي.

افتح في ستوري بوك ↗

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، لذا أضف السياق في نص الرابط حين تكون الوجهة غير واضحة.

تنعكس الأيقونات الاتجاهية في الاتجاه العربي ليبقى السهم متّجهًا مع اتجاه القراءة. اكتب نص رابط يصف الوجهة بدل «اضغط هنا».