安装

统一导出

import { Link } from "@lark-ui/core";

按需导出

import { Link } from "@lark-ui/core/components/link";

用法

基础链接

默认的 Link 组件会渲染带下划线、使用主色样式的锚点元素。

import { Link } from "@lark-ui/core";

export default function Example() {
  return (
    <p>
      Read our <Link href="/docs">documentation</Link> for more details.
    </p>
  );
}

外部链接

使用 Link.ExternalIcon 子组件来标识会在新标签页打开的链接。

import { Link } from "@lark-ui/core";

export default function Example() {
  return (
    <Link
      href="https://cloudflare.com"
      target="_blank"
      rel="noopener noreferrer"
    >
      Visit Lark <Link.ExternalIcon />
    </Link>
  );
}

框架集成（LinkProvider）

如需在全应用范围内接入路由，请在应用根节点配置 LinkProvider。你的包装组件会接收到 href，并负责把它桥接到路由的 API。这样工程师可以在任何地方使用 <Link href="...">，无需关心路由内部实现。

import { forwardRef } from "react";
import { LinkProvider } from "@lark-ui/core";
import { Link as RouterLink } from "react-router-dom";

// Your app's wrapper maps href to the router's navigation prop
// and handles external URLs with a plain <a>
const AppLink = forwardRef(({ href, to, ...rest }, ref) => {
  const destination = href ?? to;
  const isExternal =
    destination?.startsWith("http") &&
    new URL(destination).origin !== window.location.origin;

  if (isExternal) {
    return <a ref={ref} href={destination} {...rest} />;
  }
  return <RouterLink ref={ref} to={destination} {...rest} />;
});

// Wrap your app once
export function App() {
  return (
    <LinkProvider component={AppLink}>
      {/* All <Link href="..."> calls go through AppLink */}
      <YourApp />
    </LinkProvider>
  );
}

使用 render 属性组合

在需要直接控制渲染元素的特殊场景下，请使用 render 属性。它会完全绕过 LinkProvider——其余所有属性（href、target、className 等）都会自动合并到所提供的元素上。

import { Link } from "@lark-ui/core";
import { Link as RouterLink } from "react-router-dom";

export default function Example() {
  return (
    <>
      {/* Force a specific router link (bypasses LinkProvider) */}
      <Link render={<RouterLink to="/dashboard" />} variant="inline">
        Dashboard
      </Link>

      {/* Force a plain anchor (bypasses LinkProvider) */}
      <Link render={<a />} href="https://example.com" target="_blank" rel="noopener noreferrer">
        External Site <Link.ExternalIcon />
      </Link>
    </>
  );
}

示例

段落中的行内链接

链接在段落文本中自然排版，下划线偏移量处理得当。

import { Link } from "@lark-ui/core";

export function LinkInParagraphDemo() {
  return (
    <p className="mx-auto max-w-md text-base leading-relaxed text-lark-default">
      这是一段包含<Link href="#">行内链接</Link>
      的段落，链接与周围的文字自然衔接。链接保留了合适的下划线偏移量，便于阅读。
    </p>
  );
}

带图标的外链

使用 Link.ExternalIcon 在视觉上标识会跳转到站外的链接。

import { Link } from "@lark-ui/core";

export function LinkExternalDemo() {
  return (
    <Link
      href="https://cloudflare.com"
      target="_blank"
      rel="noopener noreferrer"
      className="text-base"
    >
      访问 Lark <Link.ExternalIcon />
    </Link>
  );
}

current 变体（颜色继承）

current 变体会继承父级的颜色，适合用在告警等带背景色的场景中的链接。

import { Link } from "@lark-ui/core";

export function LinkCurrentVariantDemo() {
  return (
    <p className="text-base text-lark-danger">
      这条错误信息包含一个{" "}
      <Link href="#" variant="current">
        链接
      </Link>
      ，它继承父级的红色样式。
    </p>
  );
}

使用 render 属性组合

render 属性可以把 Link 的样式组合到任意元素上，从而与框架的路由组件集成。

import { Link } from "@lark-ui/core";

export function LinkRenderDemo() {
  return (
    <div className="flex flex-col gap-x-6 gap-y-4 text-base md:flex-row">
      <Link render={<CustomRouterLink href="/dashboard" />} variant="inline">
        仪表板（通过 render）
      </Link>
      <Link
        render={
          <CustomRouterLink
            href="https://developers.cloudflare.com"
            target="_blank"
            rel="noopener noreferrer"
          />
        }
        variant="inline"
      >
        Lark 文档 <Link.ExternalIcon />
      </Link>
    </div>
  );
}

API 参考

Link 属性

继承原生锚点元素的全部属性。

变体

Link.ExternalIcon

用于标识外链的 SVG 图标组件。接受所有 SVG 元素属性。

<Link href="https://example.com" target="_blank" rel="noopener noreferrer">
  External Site <Link.ExternalIcon />
</Link>

设计规范