Link

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".

Bad ❌

For more information, click here.

Good ✅

Visit Pinterest.com for more information.

<Box>
  <Text size="500">Bad ❌</Text>
  <Text>
    For more information,{' '}
    <Text inline weight="bold">
      <Link accessibilityLabel="visit https://pinterest.com" inline href="https://pinterest.com">
        click here
      </Link>
    </Text>
    .
  </Text>
  <Box paddingY={4}>
    <Text size="500">Good ✅</Text>
    <Text>
      Visit{' '}
      <Text inline weight="bold">
        <Link inline href="https://pinterest.com">
          Pinterest.com
        </Link>
      </Text>{' '}
      for more information.
    </Text>
  </Box>
</Box>

<Box>
  <Text size="500">Bad ❌</Text>
  <Text>
    For more information,{' '}
    <Text inline weight="bold">
      <Link accessibilityLabel="visit https://pinterest.com" inline href="https://pinterest.com">
        click here
      </Link>
    </Text>
    .
  </Text>
  <Box paddingY={4}>
    <Text size="500">Good ✅</Text>
    <Text>
      Visit{' '}
      <Text inline weight="bold">
        <Link inline href="https://pinterest.com">
          Pinterest.com
        </Link>
      </Text>{' '}
      for more information.
    </Text>
  </Box>
</Box>

Accessible Tab Link

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

Boards

Pins

function TabExample() {
  const [activeIndex, setActiveIndex] = React.useState(0);
  return (
    <Box display="flex" alignItems="center" role="tablist">
      {['Boards', 'Pins'].map((text, index) => (
        <Box
          color={index === activeIndex ? 'darkGray' : undefined}
          display="inlineBlock"
          key={text}
          rounding="pill"
        >
          <Link
            accessibilitySelected={index === activeIndex}
            hoverStyle="none"
            href="https://pinterest.com"
            onClick={({ event }) => {
              event.preventDefault();
              setActiveIndex(index);
            }}
            rounding="pill"
            role="tab"
          >
            <Box padding={3} rounding="pill">
              <Text color={index === activeIndex ? 'white' : 'darkGray'}>{text}</Text>
            </Box>
          </Link>
        </Box>
      ))}
    </Box>
  );
}

function TabExample() {
  const [activeIndex, setActiveIndex] = React.useState(0);
  return (
    <Box display="flex" alignItems="center" role="tablist">
      {['Boards', 'Pins'].map((text, index) => (
        <Box
          color={index === activeIndex ? 'darkGray' : undefined}
          display="inlineBlock"
          key={text}
          rounding="pill"
        >
          <Link
            accessibilitySelected={index === activeIndex}
            hoverStyle="none"
            href="https://pinterest.com"
            onClick={({ event }) => {
              event.preventDefault();
              setActiveIndex(index);
            }}
            rounding="pill"
            role="tab"
          >
            <Box padding={3} rounding="pill">
              <Text color={index === activeIndex ? 'white' : 'darkGray'}>{text}</Text>
            </Box>
          </Link>
        </Box>
      ))}
    </Box>
  );
}

Variants

Link and Text

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

Incorrect underline color: Pinterest.com

Correct underline color: Pinterest.com

<Box>
  <Link href="https://pinterest.com">
    <Box padding={2}>
      <Text color="red" weight="bold">
        Incorrect underline color: Pinterest.com
      </Text>
    </Box>
  </Link>
  <Text color="red" weight="bold">
    <Link href="https://pinterest.com">
      <Box padding={2}>Correct underline color: Pinterest.com</Box>
    </Link>
  </Text>
</Box>

<Box>
  <Link href="https://pinterest.com">
    <Box padding={2}>
      <Text color="red" weight="bold">
        Incorrect underline color: Pinterest.com
      </Text>
    </Box>
  </Link>
  <Text color="red" weight="bold">
    <Link href="https://pinterest.com">
      <Box padding={2}>Correct underline color: Pinterest.com</Box>
    </Link>
  </Text>
</Box>

tapStyle and hoverStyle

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

Link without compress nor underline

Link with compress only

Link with underline only

Link with compress and underline

function PermutationsExample() {
  return (
    <Box>
      {[
        { text: 'Link without compress nor underline', hoverStyle: 'none', tapStyle: 'none' },
        { text: 'Link with compress only', hoverStyle: 'none', tapStyle: 'compress' },
        { text: 'Link with underline only', hoverStyle: 'underline', tapStyle: 'none' },
        { text: 'Link with compress and underline', hoverStyle: 'underline', tapStyle: 'compress' },
      ].map(({ text, hoverStyle, tapStyle }) => (
        <Box key={text} padding={2}>
          <Text>
            <Link
              hoverStyle={hoverStyle}
              href="https://pinterest.com"
              onClick={({ event }) => {
                event.preventDefault();
              }}
              tapStyle={tapStyle}
              target="blank"
            >
              {text}
            </Link>
          </Text>
        </Box>
      ))}
    </Box>
  );
}

function PermutationsExample() {
  return (
    <Box>
      {[
        { text: 'Link without compress nor underline', hoverStyle: 'none', tapStyle: 'none' },
        { text: 'Link with compress only', hoverStyle: 'none', tapStyle: 'compress' },
        { text: 'Link with underline only', hoverStyle: 'underline', tapStyle: 'none' },
        { text: 'Link with compress and underline', hoverStyle: 'underline', tapStyle: 'compress' },
      ].map(({ text, hoverStyle, tapStyle }) => (
        <Box key={text} padding={2}>
          <Text>
            <Link
              hoverStyle={hoverStyle}
              href="https://pinterest.com"
              onClick={({ event }) => {
                event.preventDefault();
              }}
              tapStyle={tapStyle}
              target="blank"
            >
              {text}
            </Link>
          </Text>
        </Box>
      ))}
    </Box>
  );
}

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

Edit page on GitHub