Link

Link navigates. It takes one required prop, url, and reads it: a path stays inside the product, an absolute address leaves it, and the component renders a different element and a different set of attributes for each.

Use a link inside running text. It is the one control that can sit in the middle of a sentence without breaking it, which is also the limit of where it belongs: in a toolbar or a form it is a small underlined target next to things built to be aimed at. Use a Button there, and for anything that changes state rather than moving the reader. Within a page, Tab Bar switches between sibling views without navigating at all.

Link sets its own type — purple, underlined, at Text Medium — and does not inherit the size of the text around it. There is no size prop, so a link placed in small or caption text renders larger than the sentence holding it.

url is the only navigation prop. A relative path renders a react-router-dom link, which navigates inside the app without a page load; an https:// address renders a plain <a>. You never pick between them, and there is no to.

An absolute URL gets three things at once: target="_blank", rel="noopener noreferrer", and the external icon appended after the text. You do not add the rel yourself, and you cannot remove the icon — it is rendered by the component from the URL, and there is no prop for it.

target="_blank" is the second route into that treatment. Setting it on a relative path makes the link external in every respect, icon included, so an internal destination you wanted in a new tab arrives looking like it leaves Persona. Going the other way, target="_self" on an absolute URL opens in the same tab but keeps the icon and the rel.

An external link carries title="Opens in new window" unless you pass aria-label, which replaces the title rather than adding to it. So an aria-label written to clarify the destination — “Persona docs” — silently removes the only announcement that the destination is a new tab. Put both in it: aria-label="Persona docs, opens in new window".

Nothing else here needs adding. Both branches render a real anchor, so focus, Enter and the browser’s own link menu work without configuration.

The text is the whole description of where the link goes, and it is also the link’s accessible name. “Click here” and “Learn more” describe the reader’s own action instead, so a screen reader listing the links on a page reports five identical names for five different places.

One link per destination in a passage. Repeating the same destination in one paragraph reads as two places rather than one, and doubles the number of targets for no new information.

Writing has the rules that apply to link text as it does to every other string.