# 链接

用于页面之间导航的语义元素。

```jsx
<Link href="#">注册</Link>
```

## [API 参考](#api-参考)

该组件基于 `a` 元素，支持 [常见的边距属性](/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 |

## [示例](#示例)

### [大小](#大小)

使用 `size` 属性来控制链接的大小。该属性还提供正确的行高和校正的字母间距—随着文本大小的增加，相对的行高和字母间距减小。

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

  <Link href="#" size="2">
    注册
  </Link>

  <Link href="#" size="3">
    注册
  </Link>

  <Link href="#" size="4">
    注册
  </Link>

  <Link href="#" size="5">
    注册
  </Link>

  <Link href="#" size="6">
    注册
  </Link>

  <Link href="#" size="7">
    注册
  </Link>

  <Link href="#" size="8">
    注册
  </Link>

  <Link href="#" size="9">
    注册
  </Link>
</Flex>
```

### [字重](#字重)

使用 `weight` 属性设置文本的字重。

```jsx
<Flex direction="column">
  <Link href="#" weight="regular">
    注册
  </Link>

  <Link href="#" weight="medium">
    注册
  </Link>

  <Link href="#" weight="bold">
    注册
  </Link>
</Flex>
```

### [截断](#截断)

使用 `truncate` 属性在文本溢出其容器时用省略号截断文本。

```jsx
<Flex maxWidth="150px">
  <Link href="#" truncate>
    注册新闻通讯
  </Link>
</Flex>
```

### [颜色](#颜色)

使用 `color` 属性指定特定的 [颜色](/themes/docs/theme/color)。

```jsx
<Flex direction="column">
  <Link href="#" color="indigo">
    注册
  </Link>

  <Link href="#" color="cyan">
    注册
  </Link>

  <Link href="#" color="orange">
    注册
  </Link>

  <Link href="#" color="crimson">
    注册
  </Link>
</Flex>
```

### [高对比度](#高对比度)

使用 `highContrast` 属性增加与背景的颜色对比度。

```jsx
<Flex direction="column">
  <Link href="#" color="gray">
    注册
  </Link>

  <Link href="#" color="gray" highContrast>
    注册
  </Link>
</Flex>
```

### [下划线](#下划线)

使用 `underline` 属性管理下划线的可见性。

```jsx
<Flex direction="column">
  <Link href="#" underline="hover">
    注册
  </Link>

  <Link href="#" underline="always">
    注册
  </Link>
</Flex>
```

<!--$-->

<!--/$-->