---
title: "Link"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Link using semantic HTML anchors. Consistent hover states, color variants, and underline styles for accessible, theme-aware hyperlinks."
url: https://frutjam.com/zh-hant/components/link
---

# Link Component

具有視覺層次結構和語意的連結元件樣式錨元素。 Frutjam 連結系統透過 Tailwind CSS 實用程式類別支援多種顏色、懸停效果、尺寸和裝飾選項。連結非常適合文字連結、導航和號召性用語元素，透過適當的焦點管理和下劃線切換選項來保持可訪問性標準。

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

| 班級             | 類型 | 描述          |
| -------------- | --- | ----------- |
| link           | 根據 | 帶有底線和顏色的樣式錨 |
| link-hover     | 風格 | 下劃線僅在懸停時可見  |
| link-xs        | 尺寸 | 特小號         |
| link-sm        | 尺寸 | 小的          |
| link-md        | 尺寸 | 中（預設）       |
| link-lg        | 尺寸 | 大的          |
| link-xl        | 尺寸 | 特大號         |
| link-2xl       | 尺寸 | 2×特大號       |
| link-primary   | 顏色 | 主要主題顏色      |
| link-secondary | 顏色 | 次要主題色       |
| link-accent    | 顏色 | 強調主題顏色      |
| link-neutral   | 顏色 | 中性主題色       |
| link-info      | 顏色 | 訊息語意顏色      |
| link-success   | 顏色 | 成功語意色       |
| link-warning   | 顏色 | 警告語意顏色      |
| link-error     | 顏色 | 錯誤語意顏色      |

## 基本用法

## 連結顏色

應用語意連結顏色來配合您的主題或傳達意義（例如使用 `link-error` 進行破壞性操作或使用 `link-success` 進行確認）。

```html
<a class="link link-primary">Primary link</a>
<a class="link link-secondary">Secondary link</a>
<a class="link link-accent">Accent link</a>
<a class="link link-success">Success link</a>
<a class="link link-info">Info link</a>
<a class="link link-warning">Warning link</a>
<a class="link link-error">Error link</a>
<a class="link link-neutral">Neutral link</a>
```

## 連結尺寸

縮放**超連結**以配合周圍的版式。這些實用程式類別的範圍從用於頁腳「合法」文字的超小到用於高影響力英雄部分的 2 倍大。

```html
<a class="link link-xs">Primary link</a>
<a class="link link-sm">Secondary link</a>
<a class="link link-md">Accent link</a>
<a class="link link-lg">Success link</a>
<a class="link link-xl">Info link</a>
<a class="link link-2xl">Warning link</a>
```

## 連結懸停狀態

預設情況下，您可以選擇隱藏下劃線並僅在懸停時顯示它。這是更簡潔的**導覽選單**和儀表板側邊欄的常見設計模式。

```html
<a class="link link-hover">Hover this link</a>
```