import { Link } from "@chakra-ui/react" const Demo = () => { return <Link href="#">Visit Chakra UI</Link> } Usage
import { Link } from "@chakra-ui/react"<Link href="...">Click here</Link>Examples
Variants
Use the variant prop to change the appearance of the Link component
import { Link, Stack } from "@chakra-ui/react" const Demo = () => { return ( <Stack> <Link variant="underline" href="#"> Link (Underline) </Link> <Link variant="plain" href="#"> Link (Plain) </Link> </Stack> ) } Within Text
Use Link within a text to create a hyperlink
Visit the Chakra UI website
import { Link, Text } from "@chakra-ui/react" const Demo = () => { return ( <Text> Visit the{" "} <Link variant="underline" href="https://chakra-ui.com" colorPalette="teal" > Chakra UI </Link>{" "} website </Text> ) } External
Add an external link icon to the Link component
import { Link } from "@chakra-ui/react" import { LuExternalLink } from "react-icons/lu" const Demo = () => { return ( <Link href="#"> Visit Chakra UI <LuExternalLink /> </Link> ) } Routing Library
Use the asChild prop to compose Link with framework links like (Next.js)
import { Link as ChakraLink } from "@chakra-ui/react" import NextLink from "next/link" const Demo = () => { return ( <ChakraLink asChild> <NextLink href="/about">Click here</NextLink> </ChakraLink> ) }Props
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'The color palette of the component |
variant | 'plain' | 'underline' | 'plain'The variant of the component |
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |