---
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>

The `Link` component provides styled hyperlinks with various customization options. It supports different sizes, states, and can include icons. The `OutboundLink` variant automatically handles external links with proper security attributes.

## Default

Create a basic link with the default styling.

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

## Target _blank

For external links, the component automatically adds security attributes. You can override the `rel` attribute if needed.

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

## Outbound link

Use `OutboundLink` as a convenient alternative for external links.

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

## Inline variant

Create links that flow naturally with surrounding text.

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

## Link with icon

Add icons to links for better visual context. Note that `inline` must be `false` when using icons.

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

## Size variants

The component supports different sizes to match your design needs:

<Link size="lg" href="https://www.carbondesignsystem.com/">
  Large link
</Link>
<br />
<Link href="https://www.carbondesignsystem.com/">
  Default link
</Link>
<br />
<Link size="sm" href="https://www.carbondesignsystem.com/">
  Small link
</Link>

## Disabled state

Disabled links render as plain text while maintaining accessibility.

<Link disabled href="https://www.carbondesignsystem.com/">
  Disabled link
</Link>

## Visited styles

Show visited state styling for links.

<Link visited href="https://www.carbondesignsystem.com/">
  Visited link
</Link>