Link

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
`href` Required	`string`	-
`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. Accessibility: It populates aria-label. Screen readers read the `accessibilityLabel` prop, if present, instead of the link text.
`accessibilitySelected`	`boolean`	-
`children`	`React.Node`	-
`hoverStyle`	`"none" \| "underline"`	`"underline"`
`id`	`string`	-
	id attribute of the anchor tag
`inline`	`boolean`	`false`
`onBlur`	`() => void`	-
`onClick`	`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"`
`role`	`"tab"`	-
`rounding`	`"pill" \| "circle" \| 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8`	`0`
`tapStyle`	`"none" \| "compress"`	`"none"`
`target`	`"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.

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

Accessible Content

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

<Box>
  <Heading>Bad ❌</Heading>
  <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}>
    <Heading>Good ✅</Heading>
    <Text>
      Visit{' '}
      <Text inline weight="bold">
        <Link inline href="https://pinterest.com">
          Pinterest.com
        </Link>
      </Text>{' '}
      for more information.
    </Text>
  </Box>
</Box>

<Box>
  <Heading>Bad ❌</Heading>
  <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}>
    <Heading>Good ✅</Heading>
    <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 when using it as a Tab.

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>
  );
}

Permutations: tapStyle and hoverStyle

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