Skip to Content
Sponsor

Link

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

Import#

Usage#

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 is 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
New
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.

Props#

The Link component composes the Box component.

NameTypeDescriptionDefault
colorSchemestring-
cssInterpolation<{}>The emotion's css style object-
isExternalbooleanIf `true`, the link will open in new tab-
orientation"horizontal" | "vertical"-
sizestring-
styleConfigRecord<string, any>-
variantstring-