Color Schemes for Link
are not implemented in the default theme. You can extend the theme to implement them.
Link
Links are accessible elements used primarily for navigation. This component is
styled to resemble a hyperlink and semantically renders an <a>
.
Imports#
import { Link } from "@chakra-ui/react"import { ExternalLinkIcon } from "@chakra-ui/icons"
Usage#
<Link>Vision UI Dashboard</Link>
<Link>Vision UI Dashboard</Link>
External Link#
<Link href="https://creative-tim.com?ref=docs-vud" isExternal>Vision UI Dashboard <ExternalLinkIcon mx="2px" /></Link>
<Link href="https://creative-tim.com?ref=docs-vud" isExternal>Vision UI Dashboard <ExternalLinkIcon mx="2px" /></Link>
Link 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>
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.
colorScheme
colorScheme
Description
Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
isExternal
isExternal
Description
If true
, the link will open in new tab
Type
boolean
size
size
Description
Sizes for Link
are not implemented in the default theme. You can extend the theme to implement them.
Type
string
variant
variant
Description
Variants for Link
are not implemented in the default theme. You can extend the theme to implement them.
Type
string
© 2021, Made with ❤️ by Creative Tim & Simmmple for a better web