Chakra V3 Workshop
Catch up on whats been cooking at Chakra UI and explore some of the popular community resources.
Inner Linkimport { Heading, Link, LinkOverlay, Stack, Text } from "@chakra-ui/react" const Demo = () => { return ( <Stack position="relative"> <Heading as="h4">Wanna try it out?</Heading> <Text color="fg.muted"> This entire area is a link. Click it to see the effect. </Text> <LinkOverlay asChild href="#"> <Link variant="underline">Click me</Link> </LinkOverlay> </Stack> ) } Usage
The LinkOverlay component provides a semantic way to link an entire component or card.
import { LinkBox, LinkOverlay } from "@chakra-ui/react"<LinkBox> <LinkOverlay /> </LinkBox>Examples
Article
Here's an example of using LinkOverlay to link an entire article.
import { Heading, Link, LinkBox, LinkOverlay, Span, Text, } from "@chakra-ui/react" const Demo = () => { return ( <LinkBox as="article" maxW="sm" p="5" borderWidth="1px" rounded="md"> <Span asChild color="fg.muted" textStyle="sm"> <time dateTime="2021-01-15 15:30:00 +0000 UTC">13 days ago</time> </Span> <Heading size="lg" my="2"> <LinkOverlay href="#">Chakra V3 Workshop</LinkOverlay> </Heading> <Text mb="3" color="fg.muted"> Catch up on whats been cooking at Chakra UI and explore some of the popular community resources. </Text> <Link href="#inner-link" variant="underline" colorPalette="teal"> Inner Link </Link> </LinkBox> ) } Custom Link
Use the asChild prop to add support for custom Link component like next/link or react router's Link
import { LinkBox, LinkOverlay } from "@chakra-ui/react" import NextLink from "next/link" function Example() { return ( <LinkBox as="article"> <h2> <LinkOverlay asChild> <NextLink href="#">Blog Post Title</NextLink> </LinkOverlay> </h2> <p>Some blog post content</p> <NextLink href="#inner-link">Some inner link</NextLink> </LinkBox> ) }Caveat
One of the side-effects of this technique is that the content can't be "selectable" (i.e. with a pointing device), however, this seems to be pretty uncommon in web design.