链接 · Link

链接用于操作场景。下面的官方示例展示原生用法与状态，属性名保持上游 API。

安装与前置条件

npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0

需要 React 19+，按顺序导入基础 CSS 和主题，并设置 Theme Provider。参见开始使用。

示例与使用方式

• 链接 · 综合展示 1：首先体验这个示例，再查看代码理解组件的组合方式。
• 链接 · 交互示例 2：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
• 链接 · 交互示例 3：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
• 链接 · 自定义 4：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
• 链接 · 交互示例 5：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。

API 与上游详细参考

优先使用 0.7.1 官方中文说明；上游尚未提供中文的条目保留英文。属性名、类型及默认值保持原生 API，不把示例状态名称当成组件属性。

Link

A styled anchor for inline and standalone text navigation. Supports external links, underline variants, tooltips, and custom link components for router integration. Use it for navigating between pages or to external URLs.

使用建议

• Write descriptive, concise link text that clearly communicates the destination.
• Set isStandalone when the link appears outside of inline text, so it receives proper base font sizing.
• Only set label when the link content is not descriptive text (e.g. an icon-only link). For text links, the visible text is already the accessible name; adding label overrides it for screen readers, which is harmful.
• 避免：Use Link for actions that do not navigate; use a Button instead.
• 避免：Use generic text like "click here" or "read more"; describe the destination.
• 避免：Set label on text links; aria-label prevents assistive technology from reading the actual link content.

主题 API

{
  "targets": [
    {
      "className": "astryx-link",
      "visualProps": [
        "color"
      ]
    }
  ]
}

Link

带有变体、外部链接支持和多态渲染的样式化锚点链接。

Link Provider

为子树中所有 Astryx 链接组件设置默认链接组件的 Provider。

无障碍

• Link text: Link text must have at least 4.5:1 contrast with the background behind it. For Pointer down, measure against the pressed overlay the link paints behind its text. — 4.5:1

组件结构

• Label: The visible text of the link.
• Right icon: Icon placed after the label to indicate an action affordance.
• Left icon: Icon placed before the label to represent meaning.

Link Provider

Wraps your app to replace the default <a> tag with a framework-specific link component (e.g. Next.js Link) for client-side routing across all Astryx components.