---
components: ["Link", "OutboundLink"]
---

<script>
  import { Link, OutboundLink } from "carbon-components-svelte";
  import Carbon from "carbon-icons-svelte/lib/Carbon.svelte"
  import Preview from "../../components/Preview.svelte";
</script>

## Default

<Link href="https://www.carbondesignsystem.com/">
  Carbon Design System
</Link>

## Target _blank

If setting `target` to `"_blank"`, the `Link` component will automatically set `rel="noopener noreferrer"` to guard against [potential cross-origin security exploits](https://web.dev/external-anchors-use-rel-noopener/).

You can override the `rel` attribute with a custom value.

<Link href="https://www.carbondesignsystem.com/" target="_blank">
  Carbon Design System
</Link>

## Outbound link

An alternative to manually setting `target` to `"_blank"` is to use the `OutboundLink`.

<OutboundLink href="https://www.carbondesignsystem.com/">
  Carbon Design System
</OutboundLink>

## Inline variant

<div>
  Visit the
  <Link inline href="https://www.carbondesignsystem.com/">
    Carbon Design System
  </Link>.
</div>

## Link with icon

Note that `inline` must be `false` when rendering a link with an icon.

<div>
  Visit the
  <Link href="https://www.carbondesignsystem.com/" icon={Carbon}>
    Carbon Design System
  </Link>.
</div>

## Large size

<Link size="lg" href="https://www.carbondesignsystem.com/">
  Carbon Design System
</Link>

## Small size

<Link size="sm" href="https://www.carbondesignsystem.com/">
  Carbon Design System
</Link>

## Disabled

A `disabled` link will render a `p` tag instead of an anchor element.

<Link disabled href="https://www.carbondesignsystem.com/">
  Carbon Design System
</Link>

## Visited styles

<Link visited href="https://www.carbondesignsystem.com/">
  Carbon Design System
</Link>