Link

Link is a styled anchor element with variants for different use cases.

Open in Storybook

Import

import { Link } from "@tosui/react";

Basic Usage

Preview

Code

<Link href="/docs">Documentation</Link>

Variants

Preview

Default (underline on hover)Underline (always underlined)Subtle (inherits color)

Code

<VStack gap={4} align="flex-start">
  <Link variant="default" href="#">Default (underline on hover)</Link>
  <Link variant="underline" href="#">Underline (always underlined)</Link>
  <Link variant="subtle" href="#">Subtle (inherits color)</Link>
</VStack>

External Links

Use external for links that open in a new tab. This automatically adds target="_blank" and rel="noopener noreferrer".

Preview

GitHub (opens in new tab)

Code

<Link href="https://github.com" external>
  GitHub (opens in new tab)
</Link>

Inline Links

Preview

Read our documentation for more information, or check out the getting started guide.

Code

<Box>
  Read our <Link href="#">documentation</Link> for more information,
  or check out the <Link href="#">getting started guide</Link>.
</Box>

With Router Libraries

Link is polymorphic and works with router libraries like React Router or Next.js.

// React Router
import { Link as RouterLink } from "react-router-dom";

<Link as={RouterLink} to="/about">
  About
</Link>

// Next.js
import NextLink from "next/link";

<Link as={NextLink} href="/about">
  About
</Link>

Navigation List

Preview

Code

<VStack as="nav" gap={2} align="flex-start">
  <Link href="#">Home</Link>
  <Link href="#">Products</Link>
  <Link href="#">About</Link>
  <Link href="#">Contact</Link>
</VStack>

Props Reference

Prop	Type	Default	Description
variant	"default" | "underline" | "subtle"	"default"	Visual variant
external	boolean	false	Open in new tab
href	string	-	Link destination
as	ElementType	"a"	HTML element or router component

Link also accepts all Box styling props.

TypeScript

import { Link, type LinkVariant, type LinkProps, type LinkOwnProps } from "@tosui/react";