Site settings
Change the appearance of the site to suit your preferences
TextLink
Text links are used to link to other resources in inline text.
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>