---
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/tr/components/link
---

# Link Component

Bileşen stili bağlantı öğelerini görsel hiyerarşi ve anlamsal anlamla bağlayın. Frutjam bağlantı sistemi, Tailwind CSS yardımcı program sınıfları aracılığıyla birden fazla rengi, vurgulu efektleri, boyutları ve dekorasyon seçeneklerini destekler. Metin bağlantıları, gezinme ve harekete geçirici mesaj öğeleri için mükemmel olan bağlantılar, uygun odak yönetimi ve altı çizili geçiş seçenekleriyle erişilebilirlik standartlarını korur.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

| Sınıf          | Tip   | Tanım                                                   |
| -------------- | ----- | ------------------------------------------------------- |
| link           | Temel | Alt çizgi ve renk içeren stilize çapa                   |
| link-hover     | Stil  | Alt çizgi yalnızca fareyle üzerine gelindiğinde görünür |
| link-xs        | Boyut | Ekstra küçük                                            |
| link-sm        | Boyut | Küçük                                                   |
| link-md        | Boyut | Orta (varsayılan)                                       |
| link-lg        | Boyut | Büyük                                                   |
| link-xl        | Boyut | Ekstra büyük                                            |
| link-2xl       | Boyut | 2× ekstra büyük                                         |
| link-primary   | Renk  | Birincil tema rengi                                     |
| link-secondary | Renk  | İkincil tema rengi                                      |
| link-accent    | Renk  | Vurgu teması rengi                                      |
| link-neutral   | Renk  | Nötr tema rengi                                         |
| link-info      | Renk  | Bilgi anlamsal rengi                                    |
| link-success   | Renk  | Başarı anlamsal rengi                                   |
| link-warning   | Renk  | Uyarı anlamsal rengi                                    |
| link-error     | Renk  | Hata anlamsal rengi                                     |

## Temel Kullanım

## Bağlantı Renkleri

Temanızla eşleştirmek veya anlamı iletmek için anlamsal bağlantı renkleri uygulayın (örneğin, yıkıcı eylemler için `bağlantı hatası` veya onay için `bağlantı başarısı` kullanmak).

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

## Bağlantı Boyutları

**Köprülerinizi** çevredeki tipografiye uyacak şekilde ölçeklendirin. Bu yardımcı sınıflar, altbilgi "yasal" metni için ekstra küçükten, yüksek etkili kahraman bölümleri için 2 kat büyüğe kadar değişir.

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

## Bağlantının Vurgu Durumu

Varsayılan olarak alt çizgiyi gizlemeyi ve yalnızca üzerine gelindiğinde ortaya çıkarmayı seçebilirsiniz. Bu, daha temiz **gezinme menüleri** ve kontrol paneli kenar çubukları için yaygın bir tasarım modelidir.

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