Link

Since links are usually used for navigation within text, Button is a better alternative for standalone actions.

Link can be rendered by passing children to it. It respects line breaks, allowing its content to start on one line and end on the next without breaking the text flow.

<p>
  Improving your product’s <Link onClick={() => {}}>accessibility</Link> can
  enhance the usability for all users, including those with low vision,
  blindness, hearing impairments, cognitive impairments, motor impairments or
  situational disabilities (such as a broken arm).
</p>

Link works with both href and onClick properties. Using either will render the Link as an <a> or <button> tag, respectively.

<View gap={3} direction="row">
  <Link href="/" attributes={{ target: "_blank" }}>
    Link with href
  </Link>

  <Link onClick={() => {}}>Link with onClick</Link>
</View>

You can use Link with all popular router solutions by wrapping it in the router's Link component.

<RouterLink href="/">
  <Link>Proceed to checkout</Button>
</RouterLink>

We recommend using the underline variant to visually differentiate it from the rest of the text, which is the default variant we provide. However, it's also possible to remove the underline for use cases where it produces too much visual noise.

<Link onClick={() => {}} variant="plain">
  Link without underline
</Link>

Link supports primary, positive, critical and warning colors, as well as the inherit color that uses the color value of the parent component.

<View gap={3} direction="row" align="center">
  <Link color="critical">Critical color</Link>
  <Link color="positive">Positive color</Link>
  <Link color="warning">Warning color</Link>

  <View padding={2} backgroundColor="neutral" borderRadius="small">
    <Link onClick={() => {}} color="inherit">
      Inherited color
    </Link>
  </View>
</View>

Links used as buttons can be disabled for user interaction with the disabled flag.

<Link disabled onClick={() => {}}>
  Disabled link
</Link>

Links are primarily used as pure text elements and support rendering inside multiline text. For cases when you use them as standalone elements, you can also add an icon. If the line breaks in the middle of the link content, the whole link will move to the next line.

<Link icon={ActivityIcon} variant="plain" onClick={() => {}}>
  Link with an icon
</Link>

• The <button> click event gets triggered on both Space and Enter key presses.
• The <a> click event gets triggered on Enter key press.