Link
An inline text link for navigation within running text.
Link is an inline anchor styled to sit inside a sentence or a run of text. For a
standalone, button-styled navigation control, use a
Button with href instead.
Examples
In a sentence
Examples
In a sentence
Continue to your account settings to finish setup.
<p className="text-body">
Continue to your <Link href="#">account settings</Link> to finish setup.
</p>Disabled
Disabled link
<Link href="#" isDisabled>
Disabled link
</Link>Opens in a new tab
<Link href="#" target="_blank" rel="noreferrer">
Opens in a new tab
</Link>Pass target="_blank" with rel="noreferrer" for links that leave the app, and
isDisabled to render a non-interactive link.
When to use
Use Link for navigation inside a sentence or a run of text.
Use something else when:
- The link stands on its own as a call to action. Use
Button with
href. - It performs an action instead of navigating. Use Button.
Usage
Do
Use Link inside sentences and paragraphs, where the surrounding text gives the destination its meaning.
Don't
Use a Link as a standalone call to action. A navigation control that stands
on its own should be a Button with href.
Props
| Prop | Type | Default |
|---|---|---|
childrenThe children of the component. A function may be provided to alter the children based on | TypeChildrenOrFunction<LinkRenderProps> | Default— |
classNameThe CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the | TypeClassNameOrFunction<LinkRenderProps> | Default— |
hrefA URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). | Typestring | Default— |
isDisabledWhether the link is disabled. | Typeboolean | Default— |
relThe relationship between the linked resource and the current page. See | Typestring | Default— |
targetThe target window for the link. See | TypeHTMLAttributeAnchorTarget | Default— |
Accessibility
Link wraps React Aria's Link, so it renders a real anchor with keyboard
activation and focus handling from the primitive. Middle-click, copy-link, and
open-in-new-tab keep working because the destination lives on the href.
Keyboard focus draws a 2px blue ring, offset 2px from the text, so a focused link is visible without a pointer. Focus from a click draws no ring.
The hover colour change eases over 150ms and is instant for keyboard focus and under reduced motion.