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

Import#

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

Usage#

Chakra UI

<Link>Chakra UI</Link>

<Link>Chakra UI</Link>

Editable Example

External Link#

Chakra Design system

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

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

Editable Example

Link inline with text#

Did you know that links can live inline with text

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

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

Editable Example

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.

Name	Type	Description	Default
colorScheme	`"blue" \| "cyan" \| "gray" \| "green" \| "orange" \| "pink" \| "purple" \| "red" \| "teal" \| "yellow" \| "whiteAlpha" \| "blackAlpha" \| "linkedin" \| "facebook" \| "messenger" \| "whatsapp" \| "twitter" \| "telegram"`	Color Schemes for `Link` are not implemented in the default theme. You can extend the theme to implement them.	-
isExternal	`boolean`	If `true`, the link will open in new tab	-
size	`string`	Sizes for `Link` are not implemented in the default theme. You can extend the theme to implement them.	-
variant	`string`	Variants for `Link` are not implemented in the default theme. You can extend the theme to implement them.	-

Edit this page