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

<script>
  import { Link, OutboundLink } from "carbon-components-svelte";
  import Carbon16 from "carbon-icons-svelte/lib/Carbon16"
  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={Carbon16}>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

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

### Visited styles

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