Universell einsetzbar

Link funktioniert sowohl auf dem Server als auch im Browser. Nutze immer den Standard-Import (z. B. @prokodo/ui/link) — die Library erkennt die Umgebung automatisch.

Link

Link ist die präsentationsorientierte Link-Komponente — sie baut auf BaseLink auf und ergänzt Typografie-Styling, optionale führende/trailing Icons und Varianten-Support.

---

Übersicht

import { Link } from "@prokodo/ui/link"
;<Link href="/docs/intro" color="primary">
  Read the documentation
</Link>

Live PreviewOpen in Storybook ↗

---

Import

import { Link } from "@prokodo/ui/link"

CSS:

import "@prokodo/ui/link.css"

---

Props

Prop	Typ	Standard	Pflicht	Beschreibung
href	string	—	✅	Destination URL.
children	ReactNode	—	✅	Link text content.
color	"primary" | "secondary" | "info" | "success" | "warning" | "error" | "white"	—	—	Farbvariante für den Link-Text.
startIcon	string	—	—	Icon name shown before the link text.
endIcon	string	—	—	Icon name shown after the link text.
external	boolean	false	—	Adds target="_blank" and rel="noopener noreferrer".
disabled	boolean	false	—	Deaktiviere navigation.
className	string	—	—	CSS class on the <a> element.

Siehe src/components/link/Link.model.ts für den vollständigen LinkProps-Typ.

---

AIC-Hinweis

Verwende im Anwendungscode immer den Standard-Importpfad:

import { Link } from "@prokodo/ui/link"

Eine separate Auswahl von /client oder /lazy ist im Consumer-Code nicht erforderlich.

AIC-Komponenten unterstützen außerdem ein priority-Flag für kritische Above-the-fold-Elemente. Am sichtbarsten ist das bei Image (natives Preloading via <link rel="preload"> für Above-the-fold-Inhalte).

---

WCAG-2.2-Status

Kriterium	Bezeichnung	Status	Hinweis
1.3.1	Info und Beziehungen (A)	✅ Erfüllt	Semantische Struktur (Überschriften, Listen, Labels, Landmarks) muss programmatisch via HTML oder ARIA vermittelt werden.
2.1.1	Tastatur (A)	✅ Erfüllt	Alle Funktionalität muss allein über Tastatur bedienbar sein, ohne Timing-Anforderungen.
2.4.4	Linkzweck (im Kontext) (A)	🔍 Manuell prüfen	Der Zweck jedes Links muss allein aus dem Linktext oder aus dem umgebenden Kontext bestimmbar sein.
2.4.7	Fokus sichtbar (AA)	🔍 Manuell prüfen	Auf jedem interaktiven Element muss ein sichtbarer Tastaturfokus-Indikator vorhanden sein. Prüfung gegen das angewendete Produkt-Theme erforderlich.
2.4.11	Fokus nicht verdeckt (Min.) (AA)	🔍 Manuell prüfen	Die fokussierte Komponente darf nicht vollständig durch Sticky-Header, Overlays oder andere positionierte Seitenelemente verdeckt sein.
2.5.3	Label im Namen (A)	🔍 Manuell prüfen	Bei Komponenten mit sichtbarem Label muss der zugängliche Name den sichtbaren Labeltext enthalten oder diesem entsprechen.
4.1.2	Name, Rolle, Wert (A)	✅ Erfüllt	Name, Rolle und Zustand aller interaktiven UI-Komponenten müssen via nativer HTML-Semantik oder ARIA programmatisch bestimmbar sein.

Testabdeckung: 2 jest-axe-Assertion(s) in 4 Testdatei(en) · 0 ARIA-Attribut-Vorkommen im Quellcode-Scan. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.

---

Design Tokens

Link lässt sich über CSS Custom Properties an :root oder einem umgebenden Element anpassen.

Token	Standardwert	Beschreibung
--pk-link-color	color-mix(in srgb, var(--pk-color-fg) 55%, transparent)	Standard-Linktextfarbe
--pk-link-color-hover	var(--pk-color-fg)	Linkfarbe bei Hover/Fokus ohne Farbvariante
--pk-link-color-primary	var(--pk-color-brand)	Farbe bei color="primary"
--pk-link-color-secondary	var(--pk-color-accent)	Farbe bei color="secondary"
--pk-link-color-info	color-mix(in srgb, var(--pk-color-fg) 35%, transparent)	Farbe bei color="info"
--pk-link-color-success	var(--pk-color-success)	Farbe bei color="success"
--pk-link-color-warning	var(--pk-color-warning)	Farbe bei color="warning"
--pk-link-color-error	var(--pk-color-error)	Farbe bei color="error"
--pk-link-color-white	var(--pk-palette-white)	Farbe bei color="white"
--pk-link-color-variant-hover	color-mix(in srgb, var(--pk-color-fg) 55%, transparent)	Hover-/Fokusfarbe bei Farbvarianten-Links

---

Storybook

👉 Link in Storybook öffnen

---

Quellcode

src/components/link/Link.model.ts