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>Chakra UI</Link>

External Link#

<Link href='https://chakra-ui.com' isExternal>
  Chakra Design system <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>

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>

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

string

`isExternal`

Description

If true, the link will open in new tab

Type

boolean

`size`

Type

string

`variant`

Type

string