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

# Link Component

Połącz elementy zakotwiczone w stylu komponentów z wizualną hierarchią i znaczeniem semantycznym. System łączy Frutjam obsługuje wiele kolorów, efektów najechania, rozmiarów i opcji dekoracji za pośrednictwem klas narzędzi CSS Tailwind. Idealne do linków tekstowych, elementów nawigacji i wezwań do działania, linki zachowują standardy dostępności dzięki odpowiedniemu zarządzaniu fokusem i opcjom przełączania podkreślenia.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

| Klasa          | Typ     | Opis                                             |
| -------------- | ------- | ------------------------------------------------ |
| link           | Opierać | Stylizowana kotwica z podkreśleniem i kolorem    |
| link-hover     | Styl    | Podkreślenie widoczne tylko po najechaniu myszką |
| link-xs        | Rozmiar | Bardzo mały                                      |
| link-sm        | Rozmiar | Mały                                             |
| link-md        | Rozmiar | Średni (domyślny)                                |
| link-lg        | Rozmiar | Duży                                             |
| link-xl        | Rozmiar | Bardzo duży                                      |
| link-2xl       | Rozmiar | 2× bardzo duże                                   |
| link-primary   | Kolor   | Podstawowy kolor motywu                          |
| link-secondary | Kolor   | Kolor motywu drugorzędnego                       |
| link-accent    | Kolor   | Kolor motywu akcentującego                       |
| link-neutral   | Kolor   | Neutralny kolor motywu                           |
| link-info      | Kolor   | Kolor semantyczny informacji                     |
| link-success   | Kolor   | Sukces semantyczny kolor                         |
| link-warning   | Kolor   | Ostrzeżenie kolor semantyczny                    |
| link-error     | Kolor   | Błąd koloru semantycznego                        |

## Podstawowe użycie

## Kolory łączy

Zastosuj kolory linków semantycznych, aby pasowały do ​​Twojego motywu lub aby przekazać znaczenie (np. użyj `link-error` do destrukcyjnych działań lub `link-success` do potwierdzenia).

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

## Rozmiary linków

Skaluj **hiperłącza**, aby dopasować je do otaczającej typografii. Te klasy użyteczności obejmują bardzo małe „legalne” teksty w stopce lub 2X duże w przypadku sekcji bohaterów o dużym wpływie.

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

## Stan najechania łącza

Domyślnie możesz ukryć podkreślenie i odsłonić je dopiero po najechaniu kursorem. Jest to powszechny wzorzec projektowy przejrzystych **menu nawigacyjnych** i pasków bocznych pulpitu nawigacyjnego.

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