Skip to content
Vy logo
Components

TextLink

Text links are used to link to other resources in inline text.


Examples

A simple text link

<TextLink 
  variant="primary" 
  size="md" 
  href="/components"
>
  Go to the component overview
</TextLink>

An external link

<TextLink 
  variant="primary" 
  size="md" 
  href="https://cargonet.no"
>
  CargoNet
</TextLink>

A forced external link

<Text>
  Here is an actual <TextLink variant="primary" size="md" href="https://www.youtube.com/watch?v=Zvz6kFVJpwo">
    external link
  </TextLink>. This is <TextLink variant="primary" size="md" href="https://www.youtube.com/watch?v=Zvz6kFVJpwo" isExternal={false}>also an external link</TextLink>, but it doesn't look like it.
</Text>

A link that uses a routing library's link component

<TextLink as={ReactRouterLink} to="/example">
Intern React Router link
</TextLink>

Different variants

<Stack>
  <Text>
    <TextLink href="/" variant="primary">This is a primary link</TextLink>
  </Text>
  <Text>
    <TextLink href="/" variant="secondary">This is a secondary link</TextLink>
  </Text>
</Stack>