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

# Link Component

Hubungkan elemen jangkar gaya komponen dengan hierarki visual dan makna semantik. Sistem tautan Frutjam mendukung berbagai warna, efek hover, ukuran, dan opsi dekorasi melalui kelas utilitas Tailwind CSS. Sempurna untuk tautan teks, navigasi, dan elemen ajakan bertindak, tautan mempertahankan standar aksesibilitas dengan manajemen fokus yang tepat dan menggarisbawahi opsi peralihan.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

| Kelas          | Jenis  | Keterangan                                         |
| -------------- | ------ | -------------------------------------------------- |
| link           | Basis  | Jangkar bergaya dengan garis bawah dan warna       |
| link-hover     | Gaya   | Garis bawah hanya terlihat saat mengarahkan kursor |
| link-xs        | Ukuran | Sangat kecil                                       |
| link-sm        | Ukuran | Kecil                                              |
| link-md        | Ukuran | Sedang (standar)                                   |
| link-lg        | Ukuran | Besar                                              |
| link-xl        | Ukuran | Ekstra besar                                       |
| link-2xl       | Ukuran | 2× ekstra besar                                    |
| link-primary   | Warna  | Warna tema utama                                   |
| link-secondary | Warna  | Warna tema sekunder                                |
| link-accent    | Warna  | Warna tema aksen                                   |
| link-neutral   | Warna  | Warna tema netral                                  |
| link-info      | Warna  | Info warna semantik                                |
| link-success   | Warna  | Warna semantik sukses                              |
| link-warning   | Warna  | Warna semantik peringatan                          |
| link-error     | Warna  | Kesalahan warna semantik                           |

## Penggunaan Dasar

## Warna Tautan

Terapkan warna tautan semantik agar sesuai dengan tema Anda atau untuk menyampaikan makna (seperti menggunakan `link-error` untuk tindakan merusak atau `link-success` untuk konfirmasi).

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

## Ukuran Tautan

Skalakan **hyperlink** Anda agar sesuai dengan tipografi di sekitarnya. Kelas utilitas ini berkisar dari ekstra kecil untuk teks "legal" footer hingga 2X besar untuk bagian pahlawan berdampak tinggi.

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

## Tautan Status Arahkan

Secara default, Anda dapat memilih untuk menyembunyikan garis bawah dan hanya menampilkannya saat mengarahkan kursor. Ini adalah pola desain umum untuk **menu navigasi** dan sidebar dasbor yang lebih rapi.

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