Link

<Link icon={IconZap}>
    Proceed to checkout
  </Link>

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

Link can be rendered by passing children to it. It respects the line breaks, so its content can start on one line and end on the next one 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 of them will resolve Link rendering to <a> or <button> tag respectively.

If you use Link for client-side routing, make sure to pass href property to it together with onClick. That will render Link using a correct HTML tag keeping native behavior working like expected. For instance, users can open navigation links using Link component in a new tab.

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

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

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

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

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

<Link icon={IconZap} variant="plain">
  Link with an icon
</Link>

Link supports primary and critical colors, as well as inherit color that will use the color value used by the parent component.

<View gap={3}>
  <Link color="critical">Critical color</Link>

  <div style={{ background: "black", color: "white", padding: 8 }}>
    <Link onClick={() => {}} color="inherit">
      Inherited color
    </Link>
  </div>
</View>

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

<Link disabled>Disabled link</Link>