Link
A text link to another page, a section or an outside site, inside a sentence or on its own.JSX
<Link href="https://example.com">Read the docs</Link>
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Link, Text, setRouter } from '@advui/core'
import { router } from 'expo-router'
import NextLink from 'next/link'
// iOS and Android: once at app start, so a path in href navigates.
setRouter(router)
<Text>
Read the <Link href="/docs">docs</Link> first.
</Text>
<Link href="https://tamagui.dev" external>Tamagui</Link>
<Link render={<NextLink href="/pricing" />}>Pricing</Link>Examples
Basic
Links inside sentences, an inherited color, and a link on its own.Preview
Code
Compare the plans on the , or read how billing works in the .By signing up you agree to the .
External, email and phone
External links open in a new tab on web; `mailto:` and `tel:` open the mail or phone app on iOS and Android too.Preview
Code
Adv UI is built on Tamagui (opens in a new tab) and tested with Vitest (opens in a new tab).Questions? Email support@example.com or call +1 555 0100.
Tones and underline
Primary, muted and inherited colors, and a row that underlines on hover.Preview
Code
API reference
Link
| Prop | Type | Default | Description |
|---|---|---|---|
children required | ReactNode | — | The link text. |
href | string | — | Where the link goes. On web it renders an `<a>`. On iOS and Android an absolute URL (`https:`, `mailto:`, `tel:`) opens with the system, and a path goes to the router registered with `setRouter` (or navigate in `onPress`). |
onPress | (event) => void | — | Called before the `href` is followed; call `event.preventDefault()` to stop it. Without an `href` the link is a `<button>` on web. |
render | ReactElement | — | Your router’s link on web, e.g. `<NextLink href="/pricing" />`.Web only. |
external | boolean | false | Shows an icon after the text. On web the link also opens in a new tab (`target="_blank"`, `rel="noopener noreferrer"`) and its name ends with “(opens in a new tab)”. |
tone | 'primary' | 'muted' | 'inherit' | 'primary' | `muted` for secondary links (it darkens on hover); `inherit` takes the color of the text around it. |
underline | 'always' | 'hover' | 'none' | 'always' | Keep links inside running text underlined; `hover` and `none` suit links that are clearly links already, such as a footer row. |
size | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | surrounding text | A step of the type scale, as on Text. Leave it out inside Text so the link takes its size; give one to a link on its own. |
weight | 'normal' | 'medium' | 'semibold' | 'bold' | surrounding text | Font weight. |
labels | Partial<LinkLabels> | — | `external`: the words added to an external link’s name, for translation. |
Accessibility
- Renders a real
<a href>on web, so it works with middle-click, “Open in new tab” and the browser’s link list. Without anhrefit is a<button>with thelinkrole. - On iOS and Android it has the
linkrole, and a double-tap with TalkBack or VoiceOver follows it. Inside Text it stays part of the sentence. - Underlined by default, so links in text are not told apart by color alone (WCAG 1.4.1).
primaryandmutedtext meet 4.5:1 contrast in light and dark mode. - External links say “(opens in a new tab)” after their text on web; the icon is decorative on iOS and Android, where nothing opens a tab.
- Shows a focus ring for keyboard users.
| Key | Action |
|---|---|
| Tab | Moves to the link. |
| Enter | Follows the link. |
Responsive behavior
Inside text the link wraps with the sentence; the external icon stays on the line of the last word. On its own in a stack it stretches to the stack’s width, and so does the area that takes a press; give it alignSelf="flex-start" to keep that area on its text.
Platform notes
Web
Renders
<a href>; pass render for client-side routing (Next.js, React Router). onPress runs before the browser follows the href.iOS
An absolute
href opens with Linking.openURL. A path goes to the router registered with setRouter (since 0.15.0), e.g. Expo Router’s router; without a router or onPress the link is not announced as a link and does nothing, and a warning says so in development. A fragment (#plans) is never followed, since there is no page to scroll.Android
An absolute
href opens with Linking.openURL. A path goes to the router registered with setRouter (since 0.15.0), e.g. Expo Router’s router; without a router or onPress the link is not announced as a link and does nothing, and a warning says so in development. A fragment (#plans) is never followed, since there is no page to scroll.