Skip to Content


Links are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink and semantically renders an <a>.



Chakra UI
Editable Example
Editable Example

Did you know that links can live inline with text

Editable Example

When add a link to a group of content or container, it's recommended to avoid wrapping with a link

To solve this, use the Link component with property breakout instead. It'll wrap the container in a clickable overlay and maintaining semantic HTML.

Rear view of modern home with pool
3 beds • 2 baths

Modern home in city center in the heart of historic Los Angeles

$1,900.00/ wk
34 reviews
Editable Example

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.


The Link component composes the Box component.

isExternalbooleanIf true, the link will open in new tab.
onClickfunctionFunction called when the link is clicked.