Link 链接

用于导航的样式化锚点组件，内置图标支持。

用法

1import { Link } from '@lenso/ui';

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2
3import { Link } from "@lenso/ui";4
5export function LinkBasic() {6  return (7    <Link href="#">8      Call to action <Link.Icon aria-hidden="true" />9    </Link>10  );11}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

组件结构

导入 Link 组件后，可通过点语法访问所有子部分。

1import { Link } from '@lenso/ui';2
3export default () => (4  <Link href="#">5    Call to action6    <Link.Icon />7  </Link>8);

示例

图标位置

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac2), Apache-2.0.3import { Link } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { styles } from "./source.stylex";6export function LinkIconPlacement() {7  return (8    <div {...stylex.props(styles.column)}>9      <Link href="#">10        Icon at end (default)11        <Link.Icon />12      </Link>13      <Link href="#" xstyle={styles.gap}>14        <Link.Icon />15        Icon at start16      </Link>17    </div>18  );19}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

配合 Tailwind CSS 的文本装饰

Link 默认在悬浮时显示下划线。可使用 Tailwind CSS 的 text-decoration 工具类让下划线始终可见、完全移除，或自定义其颜色、样式、粗细与偏移。

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac2), Apache-2.0.3import { Link } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { styles } from "./source.stylex";6export function LinkUnderlineAndOffset() {7  return (8    <div {...stylex.props(styles.sections)}>9      <div {...stylex.props(styles.section)}>10        <p {...stylex.props(styles.caption)}>Default hover underline</p>11        <Link href="#">12          Hover to see the underline13          <Link.Icon />14        </Link>15      </div>16      <div {...stylex.props(styles.section)}>17        <p {...stylex.props(styles.caption)}>Always visible underline</p>18        <Link href="#" xstyle={styles.underline}>19          Underline always visible20          <Link.Icon />21        </Link>22      </div>23      <div {...stylex.props(styles.section)}>24        <p {...stylex.props(styles.caption)}>No underline</p>25        <Link href="#" xstyle={styles.noUnderline}>26          Link without any underline27          <Link.Icon />28        </Link>29      </div>30      <div {...stylex.props(styles.section)}>31        <p {...stylex.props(styles.caption)}>Changing the underline offset</p>32        <div {...stylex.props(styles.column)}>33          {[styles.offset1, styles.offset2, styles.offset3, styles.offset4].map((offset, index) => (34            <Link key={index} href="#" xstyle={offset}>35              Offset {index + 1} ({index + 1}px space)36              <Link.Icon />37            </Link>38          ))}39        </div>40      </div>41    </div>42  );43}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

文本装饰线：

underline — 始终显示下划线
no-underline — 移除下划线
默认 Link 样式 — 下划线在悬浮时显示

文本装饰色：

decoration-accent、decoration-muted 等 — 使用主题色设置下划线颜色
decoration-muted/50 — 使用透明度修饰符实现半透明下划线

文本装饰样式：

decoration-solid — 实线（默认）
decoration-double — 双线
decoration-dotted — 点线
decoration-dashed — 虚线
decoration-wavy — 波浪线

文本装饰粗细：

decoration-1、decoration-2、decoration-4 等 — 控制下划线粗细

下划线偏移：

underline-offset-1、underline-offset-2、underline-offset-4 等 — 调整文本与下划线间距

更多说明见 Tailwind CSS 文档：

可用的 BEM 类：

基础：link
图标：link__icon

自定义图标

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac2), Apache-2.0.3import { ArrowUpRightFromSquare, Link as LinkIcon } from "@gravity-ui/icons";4import { Link } from "@lenso/ui";5import * as stylex from "@stylexjs/stylex";6import { styles } from "./source.stylex";7export function LinkCustomIcon() {8  return (9    <div {...stylex.props(styles.column)}>10      <Link href="#">11        External link12        <Link.Icon xstyle={styles.marginIcon}>13          <ArrowUpRightFromSquare />14        </Link.Icon>15      </Link>16      <Link href="#" xstyle={styles.gap}>17        Go to page18        <Link.Icon xstyle={styles.icon}>19          <LinkIcon />20        </Link.Icon>21      </Link>22    </div>23  );24}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

渲染函数

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac2), Apache-2.0. Native anchor retained through Base UI render composition.3import { Link } from "@lenso/ui";4export function RenderFunction() {5  return (6    <Link7      href="#"8      render={(props) => (9        <a {...props} data-custom="foo">10          {props.children}11        </a>12      )}13    >14      Call to action15      <Link.Icon />16    </Link>17  );18}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

自定义样式

Tailwind CSS

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac2), Apache-2.0.3import { Link } from "@lenso/ui";4import { styles } from "./source.stylex";5export function CustomStyles() {6  return (7    <Link href="#" xstyle={styles.custom}>8      Call to action9      <Link.Icon />10    </Link>11  );12}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

全局 CSS

若要自定义组件类，可使用 @layer components 指令。了解更多。

1@layer components {2  .link {3    @apply font-semibold no-underline hover:underline;4  }5}

样式参考

HeroUI 遵循 BEM 方法论，确保组件变体与状态可复用且易于自定义。

CSS 类

Link 使用以下 CSS 类（查看源码样式）：

基础类 [!toc]

.link — 链接基础样式
.link__icon — 链接图标样式

交互状态

组件同时支持 CSS 伪类与 data 属性，以获得更大灵活性：

焦点：:focus-visible 或 [data-focus-visible="true"]
悬浮：:hover 或 [data-hovered="true"]
按下：:active 或 [data-pressed="true"]
禁用：:disabled 或 [aria-disabled="true"]

API 参考

Link

Prop	类型	默认值	描述
`href`	`string`	-	锚点的目标 URL
`target`	`string`	`"_self"`	在何处打开链接文档
`rel`	`string`	-	当前文档与链接文档的关系
`download`	`boolean \| string`	-	触发下载而非导航
`isDisabled`	`boolean`	`false`	禁用指针与键盘交互
`className`	`string`	-	与默认样式合并的自定义类
`children`	`React.ReactNode`	-	渲染在链接内部的内容
`onPress`	`(e: PressEvent) => void`	-	链接被激活时触发
`autoFocus`	`boolean`	-	元素挂载时是否应获得焦点
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, LinkRenderProps>`	-	使用自定义渲染函数覆盖默认 DOM 元素。

Link.Icon

Prop	类型	默认值	描述
`children`	`React.ReactNode`	-	自定义图标元素；省略时使用内置箭头图标
`className`	`string`	-	附加的 CSS 类

与路由库配合使用

使用变体函数为框架专用链接（例如 Next.js）添加样式：

1import { Link } from '@lenso/ui';2import { linkVariants } from '@lenso/tokens';3import NextLink from 'next/link';4
5export default function Demo() {6  const slots = linkVariants();7
8  return (9    <NextLink className={slots.base()} href="/about">10      About Page11      <Link.Icon className={slots.icon()} />12    </NextLink>13  );14}

直接应用类

由于 HeroUI 使用 BEM 类，你可以将 Link 样式直接应用到任意链接元素：

1import NextLink from 'next/link';2
3// 直接使用 Tailwind 工具类4export default function Demo() {5  return (6    <NextLink href="/about" className="link underline-offset-2">7      About Page8    </NextLink>9  );10}11
12// 或使用原生 <a>13export default function NativeLink() {14  return (15    <a href="/about" className="link underline decoration-accent underline-offset-4">16      About Page17      <Link.Icon className="link__icon" />18    </a>19  );20}

Link 链接

用法

组件结构

示例

图标位置

配合 Tailwind CSS 的文本装饰

自定义图标

渲染函数

自定义样式

Tailwind CSS

全局 CSS

样式参考

CSS 类

基础类 [!toc]

交互状态

API 参考

Link

Link.Icon

与路由库配合使用

直接应用类

相关组件