Link

Links are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink and semantically renders an <a>.

Import#

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

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>

Props#

The Link component composes the Box component.