Link

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

Import

import { Link } from '@sajari-ui/core';

import { Link } from '@sajari-ui/core';

Usage

Editable Example

Example

<Link>Example</Link>

<Link>Example</Link>

External Link

Passing external will do the following:

Add target="_blank" so the link opens in a new tab
Add rel="noopener noreferrer" to prevent a well-known vulnerability with target="_blank"
Add a small indicator that the link will open in a new tab

Avoid using this for internal (i.e. same-site) links as it will break analytics due to the referrer being blocked. Instead just set target="_blank" manually if you want the link to open in a new tab.

Editable Example

Google

<Link href="https://www.google.com" external>
  Google
</Link>

<Link href="https://www.google.com" external>
  Google
</Link>

Link inline with text

Editable Example

Did you know that links can live inline with text

<Text>
  Did you know that <Link href="#import">links can live inline with text</Link>
</Text>

<Text>
  Did you know that <Link href="#import">links can live inline with text</Link>
</Text>

Props

The Link component composes the Box component.

Name	Type	Description
`external`	`boolean`	If `true`, the link will open in new tab.
`externalIcon`	`boolean`	Override the automatic logic to display the external icon. If omitted, then it will be shown for links with `external` or `target="_blank"`.
`disabled`	`boolean`	If `true`, the link will be disabled.
`onClick`	`function`	Function called when the link is clicked.