Sponsor

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/core"

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

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

Link around containers#

When add a link to a group of content or container, it's recommended to avoid wrapping with a link

To solve this, use the Link component with property breakout instead. It'll wrap the container in a clickable overlay and maintaining semantic HTML.

New

3 beds • 2 baths

Modern home in city center in the heart of historic Los Angeles

$1,900.00/ wk

34 reviews

// Sample card from Airbnb
function AirbnbExample() {
  const property = {
    imageUrl: "https://bit.ly/2Z4KKcF",
    imageAlt: "Rear view of modern home with pool",
    beds: 3,
    baths: 2,
    title: "Modern home in city center in the heart of historic Los Angeles",
    formattedPrice: "$1,900.00",
    reviewCount: 34,
    rating: 4,
  }
  return (
    <Box
      position="relative"
      maxW="sm"
      borderWidth="1px"
      borderRadius="lg"
      overflow="hidden"
    >
      <Image src={property.imageUrl} alt={property.imageAlt} />
      <Box p="6">
        <Box d="flex" alignItems="baseline">
          <Badge borderRadius="full" px="2" colorScheme="teal">
            New
          </Badge>
          <Box
            color="gray.500"
            fontWeight="semibold"
            letterSpacing="wide"
            fontSize="xs"
            textTransform="uppercase"
            ml="2"
          >
            {property.beds} beds &bull; {property.baths} baths
          </Box>
        </Box>
        <Box
          mt="1"
          fontWeight="semibold"
          as="h4"
          lineHeight="tight"
          isTruncated
        >
          <Link href="#breakout-link" breakout>
            {property.title}
          </Link>
        </Box>
        <Box>
          {property.formattedPrice}
          <Box as="span" color="gray.600" fontSize="sm">
            / wk
          </Box>
        </Box>
        <Box d="flex" mt="2" alignItems="center">
          {Array.from({ length: 5 }).map((_, i) => (
            <StarIcon
              key={i}
              color={i < property.rating ? "teal.500" : "gray.300"}
            />
          ))}
          <Box as="span" ml="2" color="gray.600" fontSize="sm">
            {property.reviewCount} reviews
          </Box>
        </Box>
      </Box>
    </Box>
  )
}

// Sample card from Airbnb
function AirbnbExample() {
  const property = {
    imageUrl: "https://bit.ly/2Z4KKcF",
    imageAlt: "Rear view of modern home with pool",
    beds: 3,
    baths: 2,
    title: "Modern home in city center in the heart of historic Los Angeles",
    formattedPrice: "$1,900.00",
    reviewCount: 34,
    rating: 4,
  }
  return (
    <Box
      position="relative"
      maxW="sm"
      borderWidth="1px"
      borderRadius="lg"
      overflow="hidden"
    >
      <Image src={property.imageUrl} alt={property.imageAlt} />
      <Box p="6">
        <Box d="flex" alignItems="baseline">
          <Badge borderRadius="full" px="2" colorScheme="teal">
            New
          </Badge>
          <Box
            color="gray.500"
            fontWeight="semibold"
            letterSpacing="wide"
            fontSize="xs"
            textTransform="uppercase"
            ml="2"
          >
            {property.beds} beds &bull; {property.baths} baths
          </Box>
        </Box>
        <Box
          mt="1"
          fontWeight="semibold"
          as="h4"
          lineHeight="tight"
          isTruncated
        >
          <Link href="#breakout-link" breakout>
            {property.title}
          </Link>
        </Box>
        <Box>
          {property.formattedPrice}
          <Box as="span" color="gray.600" fontSize="sm">
            / wk
          </Box>
        </Box>
        <Box d="flex" mt="2" alignItems="center">
          {Array.from({ length: 5 }).map((_, i) => (
            <StarIcon
              key={i}
              color={i < property.rating ? "teal.500" : "gray.300"}
            />
          ))}
          <Box as="span" ml="2" color="gray.600" fontSize="sm">
            {property.reviewCount} reviews
          </Box>
        </Box>
      </Box>
    </Box>
  )
}

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>

// 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	Default	Description
`isExternal`	`boolean`		If `true`, the link will open in new tab.
`onClick`	`function`		Function called when the link is clicked.

Edit this page

Link

.css-12m0k8p{pointer-events:auto;}Import.css-1l2j62r{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-1l2j62r:focus,.css-1l2j62r[data-focus]{opacity:1;box-shadow:0 0 0 3px rgba(66,153,225,0.6);}#

Usage#

External Link#

Link inline with text#

Link around containers#

Modern home in city center in the heart of historic Los Angeles

Usage with Routing Library#

Props#

Import#