TextLink
Installation
import { TextLink } from "@olab/components";Overview
文字連結：字與底線永遠同色，hover 沿自己的色階亮一階，按下時八折透明。三種顏色 variant（quiet / brand / inherit）加上 entity（人名、market 名），兩種 context：句子裡常駐底線（inline），獨立站著時 hover 才浮現底線（standalone）。有 href 時是連結，沒有 href 時是按鈕。
這是本 repo 設計、production 已採用的元件：2026-08-12 隨 production repo 的 PR #210 進入 production，2026-08-19 production 自行完成大規模遷移（PR #215），目前 production 有 16 個檔案在用。
Interactive Demo
核心一句：字與底線永遠同色；hover 沿自身色階亮一階；pressed 八折透明；句中常駐底線、獨立站著 hover 才浮現
quiet · inline（句中／表格）
Prefer the other side? View NOquiet · standalone（區塊導航）
View Allbrand · inline（hover 亮一階 brand-500）
Points reset weekly. Learn Moreinherit · inline（法務句，hover 亮一階 text-secondary）
By trading, you agree to the Terms of Use and Privacy Policy.entity（人名／market 名，rest 藏線）
0xJasmine無 href → 渲染 button（動作型，如 Show more）
State Matrix
hover / pressed 為同 token 顯式 class 模擬；disabled = rest + opacity 50%（不用 gray-3——TextLink 無背景，dark 下會與 quiet rest 撞色）。字級／字重不隨 state 改變，列在最左欄。disabled 保留 rest 的底線是刻意的：底線在句中同時是「可點」與「這裡有個連結」兩件事，拿掉會讓 inherit（同色）與 quiet inline 的 disabled 退化成看不出來源的淡字；「不能點」由 pointer-events-none 與 cursor-default 表達
variant × context | rest | hover | pressed | disabled 另帶 pointer-events-none · cursor-default |
|---|---|---|---|---|
quiet · inline text-bodyM · font-normal （14px/20px，繼承 context 字重） | View NO字＋線 text-tertiary · #8b949e | View NO字＋線 text-secondary · #cfd0d1 | View NOtext-secondary + opacity 80% · #cfd0d1 | View NOtext-tertiary + opacity 50% · #8b949e |
quiet · standalone text-bodyM · font-medium （14px/20px，standalone 統一字重） | View All字 text-tertiary／線 transparent · #8b949e | View All字＋線 text-secondary · #cfd0d1 | View Alltext-secondary + opacity 80% · #cfd0d1 | View Alltext-tertiary／線 transparent + opacity 50% · #8b949e |
brand · inline text-bodyM · font-normal （14px/20px，繼承 context 字重） | Learn More字＋線 text-brand-secondary（= brand-600） · #ed6432 | Learn More字＋線 brand-500 · #f27b50 | Learn Morebrand-500 + opacity 80% · #f27b50 | Learn Moretext-brand-secondary + opacity 50% · #ed6432 |
entity text-bodyM · font-medium （14px/20px，人名／market 名字重） | 0xJasmine字 text-primary／線 transparent · #ffffff | 0xJasmine字＋線 text-primary · #ffffff | 0xJasminetext-primary + opacity 80% · #ffffff | 0xJasminetext-primary／線 transparent + opacity 50% · #ffffff |
inherit · inline（法務句） text-bodyM · font-normal （14px/20px，繼承 context 字重） | Terms of Use字＋線 currentColor（此句 = text-tertiary） · #8b949e | Terms of Use字＋線 text-secondary · #cfd0d1 | Terms of Usetext-secondary + opacity 80% · #cfd0d1 | Terms of UsecurrentColor + opacity 50% · #8b949e |
Examples
Spec
| Part | Value | Source class |
|---|---|---|
| Underline | 1px，離字 3px | underline decoration-1 underline-offset-3 |
| quiet | 次要文字；hover 亮一階 | text-tertiary → hover:text-secondary |
| brand | 品牌色；hover 亮一階 | text-brand-secondary → hover:text-brand-500 |
| inherit | 跟隨句子顏色；hover 轉次要文字 | decoration-current → hover:text-secondary |
| entity | 主要文字、medium；rest 不顯示底線 | text-primary font-medium decoration-transparent |
| standalone | rest 藏底線，hover 浮現；字重 medium，可帶 icon（gap 4px） | decoration-transparent · inline-flex gap-1 font-medium |
| Pressed | 80% 不透明度 | active:opacity-80 |
| Disabled | 50% 不透明度，保留底線，不能點 | opacity-50 pointer-events-none |
| Typography | 不自帶字級，繼承所在文字 |
數值為 live-ds-spec/textlink.md §5 於 2026-07-16 拍板的規範，2026-07-17 在 dark 模式實測過；source class 對照目前的元件原始碼，色票隨目前的 dark / light 模式即時解析。完整量測、狀態細節與已知不一致見 live-ds-spec/textlink.md。
Usage
Do
- 句子或表格裡的連結用 inline；區塊角落的「View All」用 standalone。
- 品牌強調的連結（Learn More）用 brand；法務句裡的連結用 inherit。
- 有 href 就是導航；沒有 href 的「Show more」這類動作也用 TextLink，它會變成按鈕。
Don't
- 不要用虛線底線；虛線保留給 tooltip 與名詞解釋，TextLink 一律實線。
- 不要用 div 加 onClick 做連結；要用 TextLink（或 asChild 套在真的連結上）。
- 不要用 TextLink 做主要動作；主要動作請用 Button。
Links
- Measured spec
- live-ds-spec/textlink.md