Link

Introduction

The Link component is a powerful link component that not only supports traditional link styles but also provides button styles, animation effects, and rich customization options. Through semantic property configuration, you can achieve various visual effects without manually writing CSS class names.

Key Features:

🎨 Multiple style variants (default, primary, secondary, text, cta, ghost, light)
🔘 Complete button style support (normal, ghost, circular, various sizes)
✨ Rich animation effects (lift, glow, scale)
📱 Responsive design with various alignment options
🎯 Semantic properties, no need to manually concatenate CSS classes
♿ Comprehensive accessibility support

Basic Usage

The simplest way to use links, supporting both internal and external links.

基础链接

关于我们

外部链接

访问外部网站

---
/**
 * @component LinkBasic
 * @description Link组件的基础用法示例
 */

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="https://example.com" external>访问外部网站</Link>
  </div>
</div>

Button Styles

Enable button styles with the btn attribute, supporting multiple colors, sizes, and shapes.

使用 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>

Style Variants

Apply different style variants using the variant attribute, suitable for different use cases.

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

默认链接主要链接次要链接文本链接行动号召幽灵链接浅色链接

块级主要链接块级次要链接块级行动号召链接

小号链接中号链接大号链接

---
/**
 * @component LinkVariants
 * @description Link组件的样式变体示例
 */

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

<div class="cosy:flex cosy:gap-4 cosy:flex-wrap cosy:items-center">
  <Link href="/default" variant="default">默认链接</Link>
  <Link href="/primary" variant="primary">主要链接</Link>
  <Link href="/secondary" variant="secondary">次要链接</Link>
  <Link href="/text" variant="text">文本链接</Link>
  <Link href="/cta" variant="cta">行动号召</Link>
  <Link href="/ghost" variant="ghost">幽灵链接</Link>
  <Link href="/light" variant="light">浅色链接</Link>
</div>

使用 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>

Animation Effects

Add hover animation effects using the animation attribute to enhance user experience.

使用 animation 属性为链接添加动画效果，支持 hover-lift、hover-glow、hover-scale、none

上浮效果发光效果缩放效果无动画

按钮上浮按钮发光按钮缩放按钮无动画

---
/**
 * @component LinkAnimations
 * @description Link组件的链接动画效果示例
 */

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

<div class="cosy:flex cosy:gap-4 cosy:flex-wrap cosy:items-center">
  <Link href="/lift" animation="hover-lift" variant="primary">上浮效果</Link>
  <Link href="/glow" animation="hover-glow" variant="secondary">发光效果</Link>
  <Link href="/scale" animation="hover-scale" variant="cta">缩放效果</Link>
  <Link href="/none" animation="none" variant="ghost">无动画</Link>
</div>

按钮样式的链接也支持相同的动画效果

上浮效果发光效果缩放效果无动画

按钮上浮按钮发光按钮缩放按钮无动画

---
/**
 * @component ButtonAnimations
 * @description Link组件的按钮动画效果示例
 */

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

<div class="cosy:flex cosy:gap-4 cosy:flex-wrap cosy:items-center">
  <Link href="/btn-lift" btn color="primary" animation="hover-lift"
    >按钮上浮</Link
  >
  <Link href="/btn-glow" btn color="secondary" animation="hover-glow"
    >按钮发光</Link
  >
  <Link href="/btn-scale" btn color="accent" animation="hover-scale"
    >按钮缩放</Link
  >
  <Link href="/btn-none" btn color="info" animation="none">按钮无动画</Link>
</div>

Advanced Features

More advanced features including alignment, style decorations, debug mode, and more.

使用 align 属性控制链接的对齐方式，支持 left、center、right

centerText 属性是为了向后兼容，推荐使用 align="center"

---
/**
 * @component LinkAlignment
 * @description Link组件的对齐方式示例
 */

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

<div class="cosy:space-y-2">
  <Link href="/left" align="left" block variant="primary">左对齐链接</Link>
  <Link href="/center" align="center" block variant="secondary"
    >居中对齐链接</Link
  >
  <Link href="/right" align="right" block variant="cta">右对齐链接</Link>
</div>

使用 rounded、noUnderline、fullWidth 等属性修饰链接样式

centerText 属性是为了向后兼容，推荐使用 align="center"

---
/**
 * @component LinkModifiers
 * @description Link组件的样式修饰示例
 */

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

<div class="cosy:space-y-2">
  <div class="cosy:flex cosy:gap-4 cosy:flex-wrap cosy:items-center">
    <Link href="/rounded" rounded variant="primary">圆角链接</Link>
    <Link href="/no-underline" noUnderline variant="secondary">无下划线</Link>
  </div>
  <Link href="/full-width" fullWidth variant="cta">全宽链接</Link>
</div>

使用 debug 属性显示调试边框，方便开发时查看组件边界

centerText 属性是为了向后兼容，推荐使用 align="center"

---
/**
 * @component LinkDebug
 * @description Link组件的调试模式示例
 */

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

<div class="cosy:flex cosy:gap-4 cosy:flex-wrap cosy:items-center">
  <Link href="/debug" debug variant="primary">调试边框</Link>
  <Link href="/debug-btn" btn debug color="secondary">调试按钮</Link>
  <Link href="/debug-ghost" btn ghost debug color="accent">调试幽灵</Link>
</div>

提供向后兼容的属性，如 centerText 等

centerText 属性是为了向后兼容，推荐使用 align="center"

---
/**
 * @component LinkCompatibility
 * @description Link组件的兼容性功能示例
 */

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

<div class="cosy:space-y-2">
  <Link href="/center-text" centerText block variant="primary"
    >文本居中（兼容）</Link
  >
  <p class="cosy:text-sm cosy:text-gray-600">
    centerText 属性是为了向后兼容，推荐使用 align="center"
  </p>
</div>

API Reference

Props

Property	Description	Type	Default
`href`	Link URL	`string`	-
`external`	Whether it’s an external link, automatically opens in new window	`boolean`	`false`
`variant`	Style variant	`'default' \| 'primary' \| 'secondary' \| 'text' \| 'cta' \| 'ghost' \| 'light'`	`'default'`
`size`	Size	`'sm' \| 'md' \| 'lg'`	`'md'`
`animation`	Animation effect	`'none' \| 'hover-lift' \| 'hover-glow' \| 'hover-scale'`	`'none'`
`block`	Whether to display as block	`boolean`	`false`
`btn`	Whether to enable button style	`boolean`	`false`
`circle`	Whether it’s a circular button (use with `btn`)	`boolean`	`false`
`ghost`	Whether it’s a ghost button (use with `btn`)	`boolean`	`false`
`color`	Button color (use with `btn`)	`'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error'`	-
`align`	Alignment	`'left' \| 'center' \| 'right'`	-
`rounded`	Whether to add rounded corners	`boolean`	`false`
`noUnderline`	Whether to remove underline	`boolean`	`false`
`fullWidth`	Whether to take full width	`boolean`	`false`
`centerText`	Whether to center text (compatibility property)	`boolean`	`false`
`debug`	Whether to show debug borders	`boolean`	`false`
`class`	Custom CSS class	`string`	-
`...rest`	Other HTML `<a>` tag attributes	`HTMLAttributes<'a'>`	-