链接 Link

跳转到其他页面、页面内锚点或外部网站。触发操作（提交、打开对话框）请用按钮。

变体

examples/link/variants.html

场景	类名
正文中的链接	font-medium text-brand underline decoration-brand/30 underline-offset-4 hover:decoration-brand
独立链接（查看全部、外链）	text-sm font-medium text-brand underline-offset-4 hover:underline
导航链接	text-sm text-foreground/75 hover:text-navy aria-[current=page]:text-navy aria-[current=page]:font-medium
页脚 / 次要链接	text-sm text-muted-foreground hover:text-foreground

所有链接加上焦点样式：rounded-sm focus-visible:ring-3 focus-visible:ring-ring/40 focus-visible:outline-none。

深色背景

examples/link/on-dark.html

使用建议

推荐

• 正文里的链接始终保留下划线，不能只靠颜色区分
• 外部链接加 target="_blank" rel="noopener noreferrer"，并用 external-link 图标提示
• 当前页面的导航项加 aria-current="page"

避免

• 链接文案写「点击这里」「更多」，读屏用户脱离上下文无法理解
• 用 <a href="#"> 或 <a> 不带 href 来触发 JS 操作

无障碍

• 在新窗口打开的链接，加一段 sr-only 文字「（在新窗口打开）」
• 链接的可点击区域至少 24×24px，导航链接在移动端使用 py-3 放大

与 v2 的差异

v2 现状	规范
链接没有焦点样式	统一加 focus-visible 焦点环
导航没有当前页状态	用 aria-current="page" 驱动样式