Link

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

Chakra UI Pro: Start your application or marketing site with a growing collection of beautiful and responsive UI components.

Ads via Chakra UI

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>

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

"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

`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

Edit this page