Components

TextLink

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

Examples

A simple text link

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

An external link

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

Use the asChild prop to compose Link with framework links like Remix

import { Link as RemixLink } from "@remix-run/react"
import { TextLink } from "@vygruppen/spor-react";

const Demo = () => {
  return (
    <TextLink asChild>
      <RemixLink to="/about">Click here</NextLink>
    </RemixLink>
  )
}

A forced external link

<Text>
  Here is an actual <TextLink variant="primary" href="https://www.youtube.com/watch?v=Zvz6kFVJpwo">
    external link
  </TextLink>. This is <TextLink variant="primary" href="https://www.youtube.com/watch?v=Zvz6kFVJpwo" external={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>

Guidelines

Links are a fundamental component on the internet and are used to link to other content—either internally or externally. External links automatically have an extra icon added behind them.

Variants

We have three link variants:

The primary variant is the one we use most often on light backgrounds.

The secondary variant can be used as an alternative to the primary on light backgrounds.

The tertiary variant should only be used on dark backgrounds.

Code

`<TextLink />`

import { TextLink } from "@vygruppen/spor-react";

Text links lets you link to other resources, both internal and external.

Props

Name	Type	Description
`variant`	`"primary" \| "secondary"`	Default "primary"
`external`	`boolean`	Override whether the link is shown as external or not.
`children`	`React.ReactNode`	The link text
`size`	`"sm" \| "md" \| "lg"`
`href`	`string`	For external links

Fundamentals

Getting started