Link

Used to provide accessible navigation

AI TipWant to skip the docs? Use the MCP Server

Usage

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

<Link href="...">Click here</Link>

Examples

Variants

Use the variant prop to change the appearance of the Link component

Link (Underline)Link (Plain)

Within Text

Use Link within a text to create a hyperlink

Visit the Chakra UI website

External

Add an external link icon to the Link component

Visit Chakra UI

Routing Library

Use the asChild prop to compose Link with framework links like (Next.js)

import { Link as ChakraLink } from "@chakra-ui/react"
import NextLink from "next/link"

const Demo = () => {
  return (
    <ChakraLink asChild>
      <NextLink href="/about">Click here</NextLink>
    </ChakraLink>
  )
}

Props

Prop	Default	Type
`colorPalette`	`gray`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` The color palette of the component
`variant`	`plain`	`'underline' \| 'plain'` The variant of the component
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Kbd

Link Overlay