Link

Used to provide accessible navigation

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

const Demo = () => {
  return <Link href="#">Visit Chakra UI</Link>
}

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)

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

const Demo = () => {
  return (
    <Stack>
      <Link variant="underline" href="#">
        Link (Underline)
      </Link>
      <Link variant="plain" href="#">
        Link (Plain)
      </Link>
    </Stack>
  )
}

Within Text

Use Link within a text to create a hyperlink

Visit the Chakra UI website

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

const Demo = () => {
  return (
    <Text>
      Visit the{" "}
      <Link
        variant="underline"
        href="https://chakra-ui.com"
        colorPalette="teal"
      >
        Chakra UI
      </Link>{" "}
      website
    </Text>
  )
}

External

Add an external link icon to the Link component

Visit Chakra UI

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

const Demo = () => {
  return (
    <Link href="#">
      Visit Chakra UI <LuExternalLink />
    </Link>
  )
}

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

Kbd

Link Overlay