Link
Accessible React text link in three tones and two sizes, with inline and external modes for Saudi government sites. Mirrors its trailing icon in RTL.
Link is for navigation; use Button for actions. Set inline for links inside prose so they stay underlined, and external for outbound links.
When to use
Use Link to move the user somewhere: another page, an anchor, or an external site. Use Button for actions that change state.
Set inline for links inside paragraphs so they stay underlined and readable in body text. Set external for outbound links so the user knows they are leaving the service. Standalone links with a trailing arrow work well for "View all" patterns in dashboards.
Examples
Props
Props declared by Link. Native attributes of the underlying element pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
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>). |
Accessibility
Link renders a native <a>, so it is keyboard focusable and announced as a link. External links show a visual indicator; the icon is aria-hidden, so add context in the link text when the destination is not obvious.
Directional icons flip in RTL so the arrow still points along the reading direction. Write link text that describes the destination rather than "click here".