# Link

Semantic element for navigation between pages.

```jsx
<Link href="#">Sign up</Link>
```

## [API Reference](#api-reference)

This component is based on the `a` element and supports [common margin props](/themes/docs/overview/layout#margin-props).

| Prop           | Type                                                      | Default          |
| -------------- | --------------------------------------------------------- | ---------------- |
| `asChild`      | `boolean`                                                 | No default value |
| `size`         | `Responsive<enum>`                                        | No default value |
| `weight`       | `Responsive<"light" \| "regular" \| "medium" \| "bold">`  | No default value |
| `trim`         | `Responsive<"normal" \| "start" \| "end" \| "both">`      | No default value |
| `truncate`     | `boolean`                                                 | No default value |
| `wrap`         | `Responsive<"wrap" \| "nowrap" \| "pretty" \| "balance">` | No default value |
| `underline`    | `"auto" \| "always" \| "hover" \| "none"`                 | `"auto"`         |
| `color`        | `enum`                                                    | No default value |
| `highContrast` | `boolean`                                                 | No default value |

## [Examples](#examples)

### [Size](#size)

Use the `size` prop to control the size of the link. The prop also provides correct line height and corrective letter spacing—as text size increases, the relative line height and letter spacing decrease.

```jsx
<Flex direction="column" gap="3">
  <Link href="#" size="1">
    Sign up
  </Link>

  <Link href="#" size="2">
    Sign up
  </Link>

  <Link href="#" size="3">
    Sign up
  </Link>

  <Link href="#" size="4">
    Sign up
  </Link>

  <Link href="#" size="5">
    Sign up
  </Link>

  <Link href="#" size="6">
    Sign up
  </Link>

  <Link href="#" size="7">
    Sign up
  </Link>

  <Link href="#" size="8">
    Sign up
  </Link>

  <Link href="#" size="9">
    Sign up
  </Link>
</Flex>
```

### [Weight](#weight)

Use the `weight` prop to set the text weight.

```jsx
<Flex direction="column">
  <Link href="#" weight="regular">
    Sign up
  </Link>

  <Link href="#" weight="medium">
    Sign up
  </Link>

  <Link href="#" weight="bold">
    Sign up
  </Link>
</Flex>
```

### [Truncate](#truncate)

Use the `truncate` prop to truncate text with an ellipsis when it overflows its container.

```jsx
<Flex maxWidth="150px">
  <Link href="#" truncate>
    Sign up to the newsletter
  </Link>
</Flex>
```

### [Color](#color)

Use the `color` prop to assign a specific [color](/themes/docs/theme/color).

```jsx
<Flex direction="column">
  <Link href="#" color="indigo">
    Sign up
  </Link>

  <Link href="#" color="cyan">
    Sign up
  </Link>

  <Link href="#" color="orange">
    Sign up
  </Link>

  <Link href="#" color="crimson">
    Sign up
  </Link>
</Flex>
```

### [High-contrast](#high-contrast)

Use the `highContrast` prop to increase color contrast with the background.

```jsx
<Flex direction="column">
  <Link href="#" color="gray">
    Sign up
  </Link>

  <Link href="#" color="gray" highContrast>
    Sign up
  </Link>
</Flex>
```

### [Underline](#underline)

Use the `underline` prop to manage the visibility of the underline affordance.

```jsx
<Flex direction="column">
  <Link href="#" underline="hover">
    Sign up
  </Link>

  <Link href="#" underline="always">
    Sign up
  </Link>
</Flex>
```

<!--$-->

<!--/$-->