Link

import { Link } from "rfui";

#Basic

Example

<Link href="https://example.com">Example</Link>

#Underline

Set underline to either "always", "hover" or "none". Defaults to "always".

It is important to indicate that links are clickable. Underlining is a popular way of achieving this goal, but there are many others. The best approach will depend on the context. See Beyond Blue Links: Making Clickable Elements Recognizable for more information.

always hover none

<Flex class="gap-3">
  <Link underline="always" href="https://example.com">always</Link>
  <Link underline="hover" href="https://example.com">hover</Link>
  <Link underline="none" href="https://example.com">none</Link>
</Flex>

#In-page link

Set inPageLink to either true or false. Defaults to false.

When true, adds a "#" on hover to the left of the text.

See Anchors OK? Re-Assessing In-Page Links from Nielsen Norman Group.

#Example

<Link inPageLink underline="hover" href="#section">
  Example
</Link>

#New tab

Set inPageLink to either true or false. Defaults to false.

When true, sets target="blank" and rel="noopener noreferrer" to get the link to open in a new tab.

Note: Despite being relatively commonly seen on the web, it is generally inadvisable to do this. See Opening Links in New Browser Windows and Tabs.

Note: When _newTab is true, if _includeNewTabIcon is also true, there will be an icon at the end of the text indicating that the link will open in a new tab.

_newTab _newTab _newTab

_includeNewTabIcon _includeNewTabIcon _includeNewTabIcon

<Stack class="gap-8">
  <Stack class="gap-5">
    <Link _newTab href="https://example.com" underline="always">
      _newTab
    </Link>
    <Link _newTab href="https://example.com" underline="hover">
      _newTab
    </Link>
    <Link _newTab href="https://example.com" underline="none">
      _newTab
    </Link>
  </Stack>
  <Stack class="gap-5">
    <Link
      _newTab
      _includeNewTabIcon
      href="https://example.com"
      underline="always"
    >
      _includeNewTabIcon
    </Link>
    <Link
      _newTab
      _includeNewTabIcon
      href="https://example.com"
      underline="hover"
    >
      _includeNewTabIcon
    </Link>
    <Link
      _newTab
      _includeNewTabIcon
      href="https://example.com"
      underline="none"
    >
      _includeNewTabIcon
    </Link>
  </Stack>
</Stack>

#Props

Prop	Required	Default	Type and notes
`href`	✔	-	`string`
`underline`	-	`"always"`	`"always" \| "hover" \| "none"` It is important to indicate that links are clickable. Underlining is a popular way of achieving this goal, but there are many others. The best approach will depend on the context. See Beyond Blue Links: Making Clickable Elements Recognizable for more information.
`inPageLink`	-	`false`	`boolean` See Anchors OK? Re-Assessing In-Page Links from Nielsen Norman Group.
`_newTab`	-	`false`	`boolean` Sets `target="blank"` and `rel="noopener noreferrer"` to get the link to open in a new tab. Note: Despite being relatively commonly seen on the web, it is generally inadvisable to do this. See Opening Links in New Browser Windows and Tabs.
`_includeNewTabIcon`	-	`false`	`boolean` When `_newTab` is `true`, if `_includeNewTabIcon` is also `true`, there will be an icon at the end of the text indicating that the link will open in a new tab.
`children`	✔	-	`ComponentChild`
`...rest`	-	-	`ComponentProps<"a">` See the docs for rest parameters. For `Link`, you could pass anything you normally would pass to `<a>` because the return value looks something like this: `<a class={className} {...restWithoutClass}> {children} </a>`