#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.
alwayshovernone
<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.
#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

href*
Required
true
Type
string
Default
none
underline
Required
false
Type
"always" | "hover" | "none"
Default
"always"
Notes
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
Required
false
Type
boolean
Default
false
_newTab
Required
false
Type
boolean
Default
false
Notes

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
Required
false
Type
boolean
Default
false
Notes
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*
Required
true
Type
ComponentChild
Default
none
...rest
Required
false
Type
ComponentProps<"a">
Default
none
Notes
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>