Link

Link is an accessible element for navigation.

Imports

import { Link } from "@chakra-ui/react";
import { ExternalLinkIcon } from "@chakra-ui/icons";

Usage

<Link>Chakra UI</Link>

External Link

<Link href="https://chakra-ui.com" isExternal>
  Chakra Design system <ExternalLinkIcon mx="2px" />
</Link>

Link inline with text

<Text>
  Did you know that{" "}
  <Link color="teal.500" href="#">
    links can live inline with text
  </Link>
</Text>

Usage with Routing Library

To use the Link with a routing library like Reach Router or React Router, all you need to do is pass the as prop. It'll replace the rendered a tag with Reach's Link.

// 1. import { Link as ReachLink } from "@reach/router"

// 2. Then use it like this
<Link as={ReachLink} to="/home">
  Home
</Link>

Usage with Next.js

To use the Link with Next.js, all you need to do is to wrap Link with Next.js Link component and pass the passHref prop. passHref Forces Next.js Link to send the href property to its child.

// 1. import NextLink from "next/link"

// 2. Then use it like this
<NextLink href="/home" passHref>
  <Link>Home</Link>
</NextLink>

Props

The Link component composes the Box component.

colorScheme

Description

Color Schemes for Link are not implemented in the default theme. You can extend the theme to implement them.

Type

string

isExternal

Description

If true, the link will open in new tab

Type

boolean

size

Description

Sizes for Link are not implemented in the default theme. You can extend the theme to implement them.

Type

string

variant

Description

Variants for Link are not implemented in the default theme. You can extend the theme to implement them.

Type

string