Read the component spec before you ship the change.
See all componentsChangelog ↗Earlier draft 链接是什么？
链接承诺一个去处。点名下划线的行为、已访问态，以及外链如何标记。
变体
点击属性即可在预览中高亮。
-
- 在 Prompt 里写明这个类型。
-
- 在 Prompt 里写明这个类型。
-
- 在 Prompt 里写明这个类型。
-
- 用激活项下方的线条来标记的标签页。
-
- 给具体值，不要只给感觉词。
-
- 给具体值，不要只给感觉词。
-
- 给具体值，不要只给感觉词。
-
- 不可交互的控件，置灰且不可聚焦。
状态
点击属性即可在预览中高亮。
-
- 输入或报错前字段的默认有效状态。
-
- 指针悬停时的反馈：抬起、变色或边框变化。写清楚，别让模型自己猜。
-
- 在 Prompt 里写明这个状态。
-
- 键盘聚焦状态：清晰的焦点环或边框变化，永远不要去掉。
-
- 不可交互的控件，置灰且不可聚焦。
结构解剖
这些是 Prompt 里应该点名的部件。
什么时候用
- 正文段落里的行内引用
- 页脚与元信息行的独立导航链接
- 打开新标签的链接——必须标记，不能静默
什么时候别用
- 操作是改变状态而非跳转——改用按钮
- 链接文字写「点击这里」
- 静默打开新标签而不加标记
If the link leaves the site, say so in the markup — a silent new tab is the most reported link bug there is.
Create a link component.
STYLE
- #0071E3 text, inherits the surrounding font size
- underline appears on hover, 1px, offset 2px
- visited links settle to #7B4BE0
- external links carry a 12px arrow marker after the text
STATES
- default, hover, visited, focus-visible 2px ring, disabled #C7C7CC
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui