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
Within Text
Use Link within a text to create a hyperlink
Visit the Chakra UI website
External
Add an external link icon to the Link component
Guides
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>
)
}Styling Active Links
Use the _currentPage condition to style active links when using
aria-current="page".
<Link
href="/home"
aria-current="page"
_currentPage={{ color: "blue.500", fontWeight: "bold" }}
>
Home
</Link>With routing libraries, set aria-current based on the current route:
import { Link as ChakraLink } from "@chakra-ui/react"
import NextLink from "next/link"
import { usePathname } from "next/navigation"
const NavLink = ({ href, children }) => {
const pathname = usePathname()
const isActive = pathname === href
return (
<ChakraLink asChild>
<NextLink
href={href}
aria-current={isActive ? "page" : undefined}
_currentPage={{ color: "blue.500", fontWeight: "bold" }}
>
{children}
</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. |