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 仓库（外部链接自动加图标）

<script setup lang="ts">
import { CfLink } from '@chufix-design/vue';
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 8px; align-items: flex-start;">
    <CfLink href="#getting-started">前往入门指南</CfLink>
    <CfLink href="https://github.com/chenqi92/chufix">GitHub 仓库（外部链接自动加图标）</CfLink>
  </div>
</template>

<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 · 反色面板内使用

<script setup lang="ts">
import { CfLink } from '@chufix-design/vue';
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 8px; align-items: flex-start;">
    <CfLink href="#" variant="default">default · 主色，hover 下划线</CfLink>
    <CfLink href="#" variant="subtle">subtle · 跟随父级颜色，hover 显示下划线</CfLink>
    <CfLink href="#" variant="underline">underline · 永久带下划线</CfLink>
    <div style="background: var(--accent-1); color: var(--fg-on-accent); padding: 6px 10px; border-radius: 6px;">
      <CfLink href="#" variant="inverse">inverse · 反色面板内使用</CfLink>
    </div>
  </div>
</template>

<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（新窗口）

<script setup lang="ts">
import { CfLink } from '@chufix-design/vue';
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 8px; align-items: flex-start;">
    <CfLink href="https://github.com/chenqi92/chufix">自动识别（http / https 开头）</CfLink>
    <CfLink href="/internal" external>显式标记 external 强制加图标</CfLink>
    <CfLink href="#" target="_blank">target=_blank（新窗口）</CfLink>
  </div>
</template>

<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.

背景

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

<script setup lang="ts">
import { CfLink } from '@chufix-design/vue';
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 8px; align-items: flex-start;">
    <CfLink href="#" size="sm">小号</CfLink>
    <CfLink href="#" size="md">默认</CfLink>
    <CfLink href="#" size="lg">大号</CfLink>
    <CfLink href="#" disabled>已禁用 — 阻止点击</CfLink>
  </div>
</template>

<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