The Link component allows you to show links on the page, open them in a new window, and change the color.

Props

Component props
Name
Type
Default
Required
string
-
string
-

Supply a short, descriptive label for screen-readers to replace link texts that don't provide sufficient context about the link component behavior. Texts like Click Here, or Read More can be confusing when a screen reader reads them out of context. In those cases, we must pass an alternative text to replace the link text.

Accessibility: It populates aria-label. Screen readers read the accessibilityLabel prop, if present, instead of the link text.

boolean
-
children
React.Node
-
"none" | "underline"
"underline"
id
string
-

id attribute of the anchor tag

boolean
false
onBlur
() => void
-
AbstractEventHandler<SyntheticMouseEvent<HTMLAnchorElement> | SyntheticKeyboardEvent<HTMLAnchorElement>, {| dangerouslyDisableOnNavigation: () => void |}>
-

Callback fired when Link is clicked (pressed and released) with a mouse or keyboard. See OnLinkNavigationProvider to learn more about link navigation.

onFocus
() => void
-
ref
React.Ref<"a">
-

Forward the ref to the underlying anchor element

rel
"none" | "nofollow"
"none"
"tab"
-
"pill" | "circle" | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
0
"none" | "compress"
"none"
"null" | "self" | "blank"
"null"

Usage guidelines

When to Use
  • For navigation within or directly accompanying a sentence.
  • Directing users to another page or a different portion of the same page.
When Not to Use
  • Performing actions, such as "Save", "Cancel" or "Delete". Use Button instead.
  • Submitting a form or opening a modal. Use Button instead.

Example

You should wrap Link components inside of a Text component to get the correct font & underline color.

Accessible Content

When providing the content for the link, avoid phrases like "click here" or "go to".

Bad ❌

For more information, click here.

Good ✅

Visit Pinterest.com for more information.

Accessible Tab Link

Use accessibilitySelected and role when using it as a Tab.

Permutations: tapStyle and hoverStyle

OnLinkNavigationProvider
OnLinkNavigationProvider allows external link navigation control across all children components with link behavior.