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>Purity UI Dashboard</Link>
<Link>Purity UI Dashboard</Link>
<Link href="https://creative-tim.com?ref=docs-pud" isExternal>
Purity UI Dashboard <ExternalLinkIcon mx="2px" />
</Link>
<Link href="https://creative-tim.com?ref=docs-pud" isExternal>
Purity UI Dashboard <ExternalLinkIcon mx="2px" />
</Link>
<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

Description

Color Schemes for Link are not implemented in the default theme. You can extend the theme to implement them.

Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

isExternal

Description

If true, the link will open in new tab

Type
boolean

size

Description

Sizes for Link are not implemented in the default theme. You can extend the theme to implement them.

Type
string

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

  • Creative Tim
  • Simmmple
  • Blog
  • License