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

Props

Component props
Name
Type
Default
href
Required
string
-

The URL that the hyperlink points to.

accessibilityLabel
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. It populates aria-label. Screen readers read the accessibilityLabel prop, if present, instead of the link text. See the Accessibility guidelines for more information.

accessibilitySelected
boolean
-

Use accessibilitySelected and role when using it as a tab. See the Accessibility guidelines for more information.

children
React.Node
-

Link is a wrapper around components (or children), most commonly text, so that they become hyperlinks. See the Link and Text variant for more information.

hoverStyle
"none" | "underline"
"underline"

When underline is supplied, Link's text is underlined on hover. See the tapStyle and hoverStyle variant for more information.

id
string
-

Unique id attribute of the anchor tag.

inline
boolean
false

Properly positions Link relative to an inline element, such as Text, using the inline property.

onBlur
({| event: SyntheticFocusEvent<HTMLAnchorElement> |}) => void
-

Callback triggered when when the element loses focus.

onClick
({| event: SyntheticMouseEvent<HTMLAnchorElement> | SyntheticKeyboardEvent<HTMLAnchorElement>, dangerouslyDisableOnNavigation: () => void, |}) => void
-

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

onFocus
({| event: SyntheticFocusEvent<HTMLAnchorElement> |}) => void
-

Callback triggered when the element gains focus.

ref
React.Ref<"a">
-

Ref that is forwarded to the underlying anchor element.

rel
"none" | "nofollow"
"none"

Establishes the relationship of the linked URL. Use rel="nofollow" for offsite links to inform search engines to ignore and not follow them.

role
"tab"
-

When supplied, Link acts a tab. See the Accessible Tab Link for more information.

rounding
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | "circle" | "pill"
0

Sets a border radius for Link. Select a rounding option that aligns with its children.

tapStyle
"none" | "compress"
"none"

When compress is supplied, Link is visually compressed on click. See the tapStyle and hoverStyle variant for more information.

target
null | "self" | "blank"
"null"

Define the frame or window to open the anchor defined on href:

  • 'null' opens the anchor in the same window.
  • 'blank' opens the anchor in a new window.
  • 'self' opens an anchor in the same frame.

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.

Accessibility

Accessible Content

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

Use accessibilitySelected and role="Tab" when using Link as a tab.

Variants

Use Link within Text to get the correct font and underline color.

tapStyle and hoverStyle

Use accessibilitySelected and role="Tab" when using Link as a tab.

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