Skip to content
hightouchUI

Design system

v40.8.0

Link

Links allow user to navigate to another in-app page or external URLs.

Example

Usage

When navigating to a page in an application powered by React Router, Link component from React Router is used instead of <a> tag to avoid a full page reload.

Note that you still set path via a href prop, not to, as you would when using React Router's Link component directly.

When an absolute URL is provided, it's treated as an external link. External links open in a new tab.

Upsell

When using a link within the context of an Upsell, use variant="upsell" to update the theming appropriately.

Guidelines

When to use

  • When navigating to a different page within the app that doesn't require user input.
  • When navigating to an external URL.

When not to use

  • If navigating to a different page that requires user input, use a button instead.
  • If clicking a link performs an action while staying on the same page.

Content

Props

NameDefaultDescription
href

string

Link URL.

children

ReactNode

Link text.

as

ElementType

Element type to render as.

isExternal

boolean

If true, the link will open in new tab

variant"primary""primary" | "upsell"

Variant of the link.