Preview Updated 2026-05-10

Link

Design-consistent link styling — 4 variants, 3 sizes, auto external link detection, can be disabled.

Basic usage

The two most common cases — in-page anchor jumps and external URLs. External links (href starting with http:// or https://) automatically get a trailing icon and rel="noopener noreferrer".

前往入门指南 GitHub 仓库（外部链接自动加图标）

<CfLink href="#getting-started">Go to getting started</CfLink>
<CfLink href="https://github.com/chenqi92/chufix">GitHub repo</CfLink>

<CfLink href="#getting-started">Go to getting started</CfLink>
<CfLink href="https://github.com/chenqi92/chufix">GitHub repo</CfLink>

Four variants

default — accent color, underline on hover
subtle — inherits parent text color, underlines on hover (great inside body paragraphs)
underline — always underlined (extra emphasis on clickability)
inverse — for use inside an inverse panel (accent background) to avoid clashing with the background

default · 主色，hover 下划线 subtle · 跟随父级颜色，hover 显示下划线 underline · 永久带下划线

inverse · 反色面板内使用

<CfLink href="#" variant="default">default</CfLink>
<CfLink href="#" variant="subtle">subtle</CfLink>
<CfLink href="#" variant="underline">underline</CfLink>
<div style="background: var(--accent-1); color: var(--fg-on-accent); padding: 6px 10px;">
<CfLink href="#" variant="inverse">inverse</CfLink>
</div>

<CfLink href="#" variant="default">default</CfLink>
<CfLink href="#" variant="subtle">subtle</CfLink>
<CfLink href="#" variant="underline">underline</CfLink>
<div style={{ background: 'var(--accent-1)', color: 'var(--fg-on-accent)', padding: '6px 10px' }}>
<CfLink href="#" variant="inverse">inverse</CfLink>
</div>

External links

Three triggers cause the component to treat a link as external — auto trailing icon + rel="noopener noreferrer":

href starts with http:// / https://
explicit external prop
target="_blank"

自动识别（http / https 开头）显式标记 external 强制加图标 target=_blank（新窗口）

<CfLink href="https://github.com/chenqi92/chufix">Auto-detected</CfLink>
<CfLink href="/internal" external>Explicit external</CfLink>
<CfLink href="#" target="_blank">target=_blank</CfLink>

<CfLink href="https://github.com/chenqi92/chufix">Auto-detected</CfLink>
<CfLink href="/internal" external>Explicit external</CfLink>
<CfLink href="#" target="_blank">target=_blank</CfLink>

Sizes / disabled

size controls font size; disabled blocks clicks and grays the cursor.

小号默认大号已禁用 — 阻止点击

<CfLink href="#" size="sm">Small</CfLink>
<CfLink href="#" size="md">Default</CfLink>
<CfLink href="#" size="lg">Large</CfLink>
<CfLink href="#" disabled>Disabled</CfLink>

<CfLink href="#" size="sm">Small</CfLink>
<CfLink href="#" size="md">Default</CfLink>
<CfLink href="#" size="lg">Large</CfLink>
<CfLink href="#" disabled>Disabled</CfLink>

API

Prop	Type	Default	Description
`href`	`string`	`—`	Link URL
`target`	`string`	`—`	Same as native `<a target>`
`rel`	`string`	auto	Auto-set to `noopener noreferrer` for external links
`external`	`boolean`	`false`	Mark as external; shows trailing icon
`variant`	`'default' \| 'subtle' \| 'inverse' \| 'underline'`	`'default'`	Visual mode
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Font size
`disabled`	`boolean`	`false`	Disabled