Link

带下划线的链接

外部链接

GitHub 链接

文档链接

默认变体

主要变体

次要变体

文本变体

CTA 变体

GitHub 变体

---
/**
 * @component ExternalLink
 * @description 展示外部链接用法
 */

import { Link } from '@coffic/cosy-ui';
---

<div class="cosy:space-y-4">
  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">外部链接</h3>
    <Link href="https://example.com" external>访问外部网站</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">GitHub 链接</h3>
    <Link href="https://github.com" external>GitHub 仓库</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">文档链接</h3>
    <Link href="https://docs.example.com" external>查看文档</Link>
  </div>
</div>

基础链接

带下划线的链接

外部链接

GitHub 链接

文档链接

默认变体

主要变体

次要变体

文本变体

CTA 变体

GitHub 变体

---
/**
 * @component VariantsLink
 * @description 展示不同变体的链接
 */

import { Link } from '@coffic/cosy-ui';
---

<div class="cosy:space-y-4">
  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">默认变体</h3>
    <Link href="/default">默认链接</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">主要变体</h3>
    <Link href="/primary" variant="primary">主要链接</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">次要变体</h3>
    <Link href="/secondary" variant="secondary">次要链接</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">文本变体</h3>
    <Link href="/text" variant="text">文本链接</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">CTA 变体</h3>
    <Link href="/cta" variant="cta">行动号召</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">GitHub 变体</h3>
    <Link href="https://github.com/user/repo" variant="github">GitHub 仓库</Link
    >
  </div>
</div>

Props

active

Whether the link is in an active state.

激活链接

---
import { Link } from '@coffic/cosy-ui';
---

<Link href="/active" active>激活链接</Link>

align

Alignment method. Optional values: left, center, right.

左对齐链接

居中对齐链接

右对齐链接

---
import { Link } from '@coffic/cosy-ui';
---

<Link href="/left" align="left" btn>左对齐链接</Link>

左对齐链接

居中对齐链接

右对齐链接

---
import { Link } from '@coffic/cosy-ui';
---

<Link href="/center" align="center" btn>居中对齐链接</Link>

左对齐链接

居中对齐链接

右对齐链接

---
import { Link } from '@coffic/cosy-ui';
---

<Link href="/right" align="right" btn>右对齐链接</Link>

animation

Animation effects that define the animation behavior on mouse hover. Optional values: none, hover-lift, hover-glow, hover-scale.

使用 animation="hover-lift" 为链接添加上浮动画效果

---
import { Link, Container } from '@coffic/cosy-ui';
---

<Container flex="row" gap="md" items="center">
  <Link href="/hover-lift" animation="hover-lift" variant="primary">
    上浮效果
  </Link>
</Container>

使用 animation="hover-glow" 为链接添加发光动画效果

---
import { Link, Container } from '@coffic/cosy-ui';
---

<Container flex="row" gap="md" items="center">
  <Link href="/hover-glow" animation="hover-glow" variant="secondary">
    发光效果
  </Link>
</Container>

使用 animation="hover-scale" 为链接添加缩放动画效果

---
import { Link, Container } from '@coffic/cosy-ui';
---

<Container flex="row" gap="md" items="center">
  <Link href="/hover-scale" animation="hover-scale" variant="cta">
    缩放效果
  </Link>
</Container>

使用 block 和 align="center" 属性创建块级居中链接

---
import { Link, Container } from '@coffic/cosy-ui';
---

<Container flex="row" gap="md" items="center">
  <Link href="/block-link" block align="center" variant="primary">
    块级居中链接
  </Link>
</Container>

使用 variant="light" 在浅色背景中显示链接

---
import { Link, Container } from '@coffic/cosy-ui';
---

<Container padding="md">
  <Link href="/light-variant" variant="light"> 浅色背景中的链接 </Link>
</Container>

block

Whether to display as a block element. When set to true, the link will occupy a full line.

块级主要链接

块级次要链接

块级行动号召链接

---
import { Link } from '@coffic/cosy-ui';
---

<Link href="/block1" variant="primary" block>块级主要链接</Link>

块级主要链接

块级次要链接

块级行动号召链接

---
import { Link } from '@coffic/cosy-ui';
---

<Link href="/block2" variant="secondary" block>块级次要链接</Link>

块级主要链接

块级次要链接

块级行动号召链接

---
import { Link } from '@coffic/cosy-ui';
---

<Link href="/block3" variant="cta" block>块级行动号召链接</Link>

btn

Whether to enable button style. When set to true, button styles will be applied.

使用 color 属性设置按钮颜色，支持 primary、secondary、accent、info、success、warning、error

---
/**
 * @component LinkButtonColors
 * @description Link组件的按钮颜色示例
 */

import { Link } from '@coffic/cosy-ui';
---

<div class="cosy:flex cosy:gap-2 cosy:flex-wrap">
  <Link href="/btn" btn color="primary">主要按钮</Link>
  <Link href="/btn" btn color="secondary">次要按钮</Link>
  <Link href="/btn" btn color="accent">强调按钮</Link>
  <Link href="/btn" btn color="info">信息按钮</Link>
  <Link href="/btn" btn color="success">成功按钮</Link>
  <Link href="/btn" btn color="warning">警告按钮</Link>
  <Link href="/btn" btn color="error">错误按钮</Link>
</div>

使用 ghost 属性创建幽灵按钮，具有透明背景和边框

---
/**
 * @component LinkButtonGhost
 * @description Link组件的幽灵按钮示例
 */

import { Link } from '@coffic/cosy-ui';
---

<div class="cosy:flex cosy:gap-2 cosy:flex-wrap">
  <Link href="/ghost" btn ghost color="primary">主要幽灵</Link>
  <Link href="/ghost" btn ghost color="secondary">次要幽灵</Link>
  <Link href="/ghost" btn ghost color="accent">强调幽灵</Link>
  <Link href="/ghost" btn ghost color="info">信息幽灵</Link>
</div>

使用 circle 和 rounded 属性控制按钮形状

---
/**
 * @component LinkButtonShapes
 * @description Link组件的按钮形状示例
 */

import { Link } from '@coffic/cosy-ui';
---

<div class="cosy:flex cosy:gap-2 cosy:items-center">
  <Link href="/circle" btn circle color="primary">A</Link>
  <Link href="/circle" btn circle color="secondary">B</Link>
  <Link href="/circle" btn circle color="accent">C</Link>
  <Link href="/rounded" btn rounded color="primary">圆角按钮</Link>
  <Link href="/normal" btn color="primary">普通按钮</Link>
</div>

使用 size 属性控制按钮尺寸，支持 sm、md、lg

---
/**
 * @component LinkButtonSizes
 * @description Link组件的按钮尺寸示例
 */

import { Link } from '@coffic/cosy-ui';
---

<div class="cosy:flex cosy:gap-2 cosy:items-center">
  <Link href="/size" btn size="sm" color="primary">小按钮</Link>
  <Link href="/size" btn size="md" color="primary">中按钮</Link>
  <Link href="/size" btn size="lg" color="primary">大按钮</Link>
</div>

使用 fullWidth 属性创建全宽按钮

---
/**
 * @component LinkButtonFullWidth
 * @description Link组件的全宽按钮示例
 */

import { Link } from '@coffic/cosy-ui';
---

<div class="cosy:space-y-2">
  <Link href="/block" btn fullWidth color="primary">全宽主要按钮</Link>
  <Link href="/block" btn fullWidth color="secondary">全宽次要按钮</Link>
  <Link href="/block" btn fullWidth ghost color="accent">全宽幽灵按钮</Link>
</div>

circle

Whether it’s a circular button, requires the btn attribute to be used together.

---
import { Link } from '@coffic/cosy-ui';
---

<Link href="/circle" btn circle color="primary">A</Link>

---
import { Link } from '@coffic/cosy-ui';
---

<Link href="/circle" btn circle color="secondary">B</Link>

---
import { Link } from '@coffic/cosy-ui';
---

<Link href="/circle" btn circle color="accent">C</Link>

class

Custom CSS class name.

自定义类名链接

---
import { Link } from '@coffic/cosy-ui';
---

<Link href="/custom" class="custom-link">自定义类名链接</Link>

class:list

Class name list.

类名列表链接

---
import { Link } from '@coffic/cosy-ui';
---

<Link href="/class-list" class:list={['link-class', 'hover-effect']}
  >类名列表链接</Link
>

color

Button color, requires the btn attribute to be used together. Optional values: primary, secondary, accent, info, success, warning, error.

主要按钮

次要按钮

强调按钮

---
import { Link } from '@coffic/cosy-ui';
---

<Link href="/primary" btn color="primary">主要按钮</Link>

主要按钮

次要按钮

强调按钮

---
import { Link } from '@coffic/cosy-ui';
---

<Link href="/secondary" btn color="secondary">次要按钮</Link>

主要按钮

次要按钮

强调按钮

---
import { Link } from '@coffic/cosy-ui';
---

<Link href="/accent" btn color="accent">强调按钮</Link>

debug

Whether to display debug borders.

调试链接

---
import { Link } from '@coffic/cosy-ui';
---

<Link href="/debug" debug>调试链接</Link>

external

Whether it’s an external link. When set to true, it will automatically open in a new window.

外部链接

GitHub 链接

文档链接

---
import { Link } from '@coffic/cosy-ui';
---

<Link href="https://example.com" external>访问外部网站</Link>

外部链接

GitHub 链接

文档链接

---
/**
 * @component GithubLink
 * @description 展示 GitHub 变体的链接
 */

import { Link } from '@coffic/cosy-ui';
---

<Link href="https://github.com" variant="github">GitHub 仓库</Link>

外部链接

GitHub 链接

文档链接

---
import { Link } from '@coffic/cosy-ui';
---

<Link href="https://docs.example.com" external>查看文档</Link>

fullWidth

Whether to occupy full width.

全宽按钮

---
import { Link } from '@coffic/cosy-ui';
---

<Link href="/full" btn fullWidth>全宽按钮</Link>

ghost

Whether it’s a ghost button, requires the btn attribute to be used together.

---
import { Link } from '@coffic/cosy-ui';
---

<Link href="/ghost" btn ghost color="primary">主要幽灵</Link>

---
import { Link } from '@coffic/cosy-ui';
---

<Link href="/ghost" btn ghost color="secondary">次要幽灵</Link>

---
import { Link } from '@coffic/cosy-ui';
---

<Link href="/ghost" btn ghost color="accent">强调幽灵</Link>

---
import { Link } from '@coffic/cosy-ui';
---

<Link href="/ghost" btn ghost color="info">信息幽灵</Link>

href

Link address, required property.

基础链接

带下划线的链接

外部链接

GitHub 链接

文档链接

默认变体

主要变体

次要变体

文本变体

CTA 变体

GitHub 变体

---
/**
 * @component BasicLink
 * @description 展示基础链接用法
 */

import { Link } from '@coffic/cosy-ui';
---

<div class="cosy:space-y-4">
  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">基础链接</h3>
    <Link href="/about">关于我们</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">带下划线的链接</h3>
    <Link href="/contact" noUnderline={false}>联系我们</Link>
  </div>
</div>

基础链接

带下划线的链接

外部链接

GitHub 链接

文档链接

默认变体

主要变体

次要变体

文本变体

CTA 变体

GitHub 变体

---
/**
 * @component ExternalLink
 * @description 展示外部链接用法
 */

import { Link } from '@coffic/cosy-ui';
---

<div class="cosy:space-y-4">
  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">外部链接</h3>
    <Link href="https://example.com" external>访问外部网站</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">GitHub 链接</h3>
    <Link href="https://github.com" external>GitHub 仓库</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">文档链接</h3>
    <Link href="https://docs.example.com" external>查看文档</Link>
  </div>
</div>

基础链接

带下划线的链接

外部链接

GitHub 链接

文档链接

默认变体

主要变体

次要变体

文本变体

CTA 变体

GitHub 变体

---
/**
 * @component VariantsLink
 * @description 展示不同变体的链接
 */

import { Link } from '@coffic/cosy-ui';
---

<div class="cosy:space-y-4">
  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">默认变体</h3>
    <Link href="/default">默认链接</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">主要变体</h3>
    <Link href="/primary" variant="primary">主要链接</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">次要变体</h3>
    <Link href="/secondary" variant="secondary">次要链接</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">文本变体</h3>
    <Link href="/text" variant="text">文本链接</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">CTA 变体</h3>
    <Link href="/cta" variant="cta">行动号召</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">GitHub 变体</h3>
    <Link href="https://github.com/user/repo" variant="github">GitHub 仓库</Link
    >
  </div>
</div>

icon

Icon name, supports all available icon components.

---
/**
 * @component LinkIcons
 * @description 展示 Link 组件的图标功能
 */
import { Link, Grid } from '@coffic/cosy-ui';
---

<Grid cols={{ base: 2, md: 3, lg: 4, xl: 6 }} gap="md">
  <Link href="/home" icon="HomeIcon" variant="primary" btn> 首页 </Link>

  <Link href="/settings" icon="SettingsIcon" variant="info"> 设置 </Link>

  <Link href="/search" icon="SearchIcon" btn variant="secondary"> 搜索 </Link>

  <Link href="/user" icon="UserIcon"> 用户 </Link>

  <Link href="/mail" icon="MailIcon"> 邮件 </Link>

  <Link href="/download" icon="DownloadIcon" btn> 下载 </Link>

  <Link href="/upload" icon="UploadIcon"> 上传 </Link>

  <Link href="/folder" icon="FolderIcon"> 文件夹 </Link>

  <Link href="/star" icon="StarIcon"> 收藏 </Link>

  <Link href="/heart" icon="HeartIcon"> 喜欢 </Link>

  <Link href="/edit" icon="EditIcon"> 编辑 </Link>

  <Link href="/delete" icon="DeleteIcon"> 删除 </Link>

  <Link href="/save" icon="SaveIcon"> 保存 </Link>

  <Link href="/refresh" icon="RefreshIcon"> 刷新 </Link>

  <Link href="/notification" icon="NotificationIcon"> 通知 </Link>

  <Link href="/message" icon="MessageIcon"> 消息 </Link>

  <Link href="/dashboard" icon="DashboardIcon"> 仪表盘 </Link>

  <Link href="/chart" icon="ChartIcon"> 图表 </Link>

  <Link href="/document" icon="DocumentIcon"> 文档 </Link>

  <Link href="/tools" icon="ToolsIcon"> 工具 </Link>

  <Link href="/security" icon="SecurityIcon"> 安全 </Link>

  <Link href="/wallet" icon="WalletIcon"> 钱包 </Link>

  <Link href="/report" icon="ReportIcon"> 报告 </Link>

  <Link href="/logout" icon="LogOut"> 退出 </Link>

  <Link href="/info" icon="InfoIcon"> 信息 </Link>

  <Link href="/warning" icon="WarningIcon"> 警告 </Link>

  <Link href="/error" icon="ErrorIcon"> 错误 </Link>

  <Link href="/success" icon="CheckCircle"> 成功 </Link>

  <Link href="/calendar" icon="CalendarIcon"> 日历 </Link>

  <Link href="/globe" icon="GlobeIcon"> 全球 </Link>

  <Link href="/website" icon="WebsiteIcon"> 网站 </Link>

  <Link href="/app-store" icon="AppStoreIcon"> 应用商店 </Link>

  <Link href="/users" icon="UsersIcon"> 用户组 </Link>

  <Link href="/menu" icon="MenuIcon"> 菜单 </Link>

  <Link href="/link" icon="LinkIcon"> 链接 </Link>

  <Link href="/twitter" icon="TwitterIcon"> Twitter </Link>

  <Link href="/linkedin" icon="LinkedinIcon"> LinkedIn </Link>

  <Link href="/github" icon="GithubIcon"> GitHub </Link>

  <Link href="/sun-cloudy" icon="SunCloudyIcon"> 天气 </Link>

  <Link href="/check" icon="CheckIcon"> 检查 </Link>

  <Link href="/close" icon="CloseIcon"> 关闭 </Link>

  <Link href="/clipboard" icon="ClipboardIcon"> 剪贴板 </Link>

  <Link href="/code" icon="CodeIcon"> 代码 </Link>

  <Link href="/chevron-down" icon="ChevronDownIcon"> 展开 </Link>

  <Link href="/chevron-left" icon="ChevronLeftIcon" btn> 向左 </Link>

  <Link href="/chevron-right" icon="ChevronRightIcon" btn> 向右 </Link>

  <Link href="/alert-triangle" icon="AlertTriangle"> 警告三角 </Link>

  <Link href="/info-circle" icon="InfoCircle"> 信息圈 </Link>

  <Link href="/inbox-archive" icon="InboxArchive"> 收件箱 </Link>

  <Link href="/x-circle" icon="XCircle"> 错误圈 </Link>
</Grid>

navigationType

Navigation type, requires the navigation variant to be used together. Optional values: previous, next.

---
/**
 * @component NavigationPrevious
 * @description 展示 Link 组件的 navigation 变体用于"上一个"导航
 */

import { Link } from '@coffic/cosy-ui';
---

<Link href="/previous" variant="navigation" navigationType="previous"
  >上一页</Link
>

---
/**
 * @component NavigationNext
 * @description 展示 Link 组件的 navigation 变体用于"下一个"导航
 */

import { Link } from '@coffic/cosy-ui';
---

<Link href="/next" variant="navigation" navigationType="next">下一页</Link>

noUnderline

Whether to remove the underline, defaults to true.

带下划线链接

---
import { Link } from '@coffic/cosy-ui';
---

<Link href="/no-underline" noUnderline={false}>带下划线链接</Link>

rounded

Whether to add rounded corners.

---
import { Link } from '@coffic/cosy-ui';
---

<Link href="/rounded" rounded="none" style="padding: 0.5rem 1rem; background-color: #f3f4f6; border: 1px solid #d1d5db; display: inline-block;">无圆角链接</Link>

---
import { Link } from '@coffic/cosy-ui';
---

<Link href="/rounded" rounded="sm" style="padding: 0.5rem 1rem; background-color: #f3f4f6; border: 1px solid #d1d5db; display: inline-block;">小圆角链接</Link>

---
import { Link } from '@coffic/cosy-ui';
---

<Link
  href="/rounded"
  rounded="md"
  style="padding: 0.5rem 1rem; background-color: #f3f4f6; border: 1px solid #d1d5db; display: inline-block;"
  >中等圆角链接</Link
>

---
import { Link } from '@coffic/cosy-ui';
---

<Link
  href="/rounded"
  rounded="lg"
  style="padding: 0.5rem 1rem; background-color: #f3f4f6; border: 1px solid #d1d5db; display: inline-block;"
  >大圆角链接</Link
>

---
import { Link } from '@coffic/cosy-ui';
---

<Link
  href="/rounded"
  rounded="xl"
  style="padding: 0.5rem 1rem; background-color: #f3f4f6; border: 1px solid #d1d5db; display: inline-block;"
  >超大圆角链接</Link
>

---
import { Link } from '@coffic/cosy-ui';
---

<Link
  href="/rounded"
  rounded="full"
  style="padding: 0.5rem 1rem; background-color: #f3f4f6; border: 1px solid #d1d5db; display: inline-block;"
  >完全圆角链接</Link
>

size

Size, controls the font size and spacing of the link. Optional values: sm, md, lg.

小型链接

中型链接

大型链接

---
import { Link } from '@coffic/cosy-ui';
---

<Link href="/small" size="sm">小型链接</Link>

小型链接

中型链接

大型链接

---
import { Link } from '@coffic/cosy-ui';
---

<Link href="/medium" size="md">中型链接</Link>

小型链接

中型链接

大型链接

---
import { Link } from '@coffic/cosy-ui';
---

<Link href="/large" size="lg">大型链接</Link>

variant

Style variant, used to define the visual style of the link. Optional values: default, primary, secondary, text, cta, ghost, light, navigation, github.

使用 variant 属性设置链接样式，支持 default、primary、secondary、text、cta、ghost、light

---
import { Link } from '@coffic/cosy-ui';
---

<div style="padding: 1rem;">
  <div style="display: flex; gap: 1rem; margin-bottom: 1rem;">
    <Link href="/signup" variant="primary">主要链接</Link>
    <Link href="/learn-more" variant="secondary">次要链接</Link>
    <Link href="/docs" variant="text">文本链接</Link>
    <Link href="/get-started" variant="cta">行动号召</Link>
    <Link href="/preview" variant="ghost">幽灵链接</Link>
    <Link href="/help" variant="light">浅色链接</Link>
  </div>

  <div style="display: flex; gap: 1rem;">
    <Link href="/small" size="sm">小型链接</Link>
    <Link href="/medium" size="md">中型链接</Link>
    <Link href="/large" size="lg">大型链接</Link>
  </div>
</div>

使用 variant="github" 创建带有 GitHub 图标的链接

---
/**
 * @component GithubLink
 * @description 展示 GitHub 变体的链接
 */

import { Link } from '@coffic/cosy-ui';
---

<Link href="https://github.com" variant="github">GitHub 仓库</Link>

使用 block 属性让链接以块级元素显示，占据整行

---
/**
 * @component LinkBlock
 * @description Link组件的块级显示示例
 */

import { Link } from '@coffic/cosy-ui';
---

<div class="cosy:space-y-2">
  <Link href="/block1" variant="primary" block>块级主要链接</Link>
  <Link href="/block2" variant="secondary" block>块级次要链接</Link>
  <Link href="/block3" variant="cta" block>块级行动号召链接</Link>
</div>

使用 size 属性控制链接尺寸，支持 sm、md、lg

---
/**
 * @component LinkSizes
 * @description Link组件的尺寸变体示例
 */

import { Link } from '@coffic/cosy-ui';
---

<div class="cosy:flex cosy:gap-4 cosy:items-center">
  <Link href="/small" variant="primary" size="sm">小号链接</Link>
  <Link href="/medium" variant="primary" size="md">中号链接</Link>
  <Link href="/large" variant="primary" size="lg">大号链接</Link>
</div>

使用 variant="navigation" 创建文档导航链接，支持 previous 和 next 类型

---
/**
 * @component NavigationComplete
 * @description 展示完整的导航示例，包含上一个和下一个按钮
 */

import { Container, Link } from '@coffic/cosy-ui';
---

<Container gap="md" size="full" flex="row" justify="between">
  <Link href="/previous" variant="navigation" navigationType="previous">
    上一页：组件基础
  </Link>

  <Link href="/next" variant="navigation" navigationType="next">
    下一页：高级用法
  </Link>
</Container>

rest

Other HTML <a> tag attributes.

其他属性链接

---
import { Link } from '@coffic/cosy-ui';
---

<Link href="/rest" title="工具提示" data-testid="test-link">其他属性链接</Link>

Slots

default

The text content of the link.

基础链接

带下划线的链接

外部链接

GitHub 链接

文档链接

默认变体

主要变体

次要变体

文本变体

CTA 变体

GitHub 变体

---
/**
 * @component BasicLink
 * @description 展示基础链接用法
 */

import { Link } from '@coffic/cosy-ui';
---

<div class="cosy:space-y-4">
  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">基础链接</h3>
    <Link href="/about">关于我们</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">带下划线的链接</h3>
    <Link href="/contact" noUnderline={false}>联系我们</Link>
  </div>
</div>

基础链接

带下划线的链接

外部链接

GitHub 链接

文档链接

默认变体

主要变体

次要变体

文本变体

CTA 变体

GitHub 变体

---
/**
 * @component ExternalLink
 * @description 展示外部链接用法
 */

import { Link } from '@coffic/cosy-ui';
---

<div class="cosy:space-y-4">
  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">外部链接</h3>
    <Link href="https://example.com" external>访问外部网站</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">GitHub 链接</h3>
    <Link href="https://github.com" external>GitHub 仓库</Link>
  </div>

  <div>
    <h3 class="cosy:text-lg cosy:font-semibold cosy:mb-2">文档链接</h3>
    <Link href="https://docs.example.com" external>查看文档</Link>
  </div>
</div>

基础链接

带下划线的链接

外部链接

GitHub 链接

文档链接

默认变体

主要变体

次要变体

文本变体

CTA 变体

GitHub 变体