Works everywhere

Link works in both server and client environments. Always use the standard import (e.g. @prokodo/ui/link) — the library detects the runtime automatically.

Link

Link is the presentational link component — builds on BaseLink and adds typography styling, optional leading/trailing icons, and variant support.

Live demo →

---

Overview

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	Type	Default	Required	Description
href	string	—	(*)	Destination URL. Either href or onClick is required.
children	ReactNode	—	—	Link label / content.
color	LinkVariants	—	—	Color variant (affects text and icon color).
classNames	LinkClassNames	—	—	Fine-grained class overrides for sub-elements.
hasBackground	boolean	false	—	Show a background on the link.
ariaLabel	string	—	—	Accessible label override (aria-label).
onClick	() => void	—	(*)	Click handler. Either href or onClick is required.
className	string	—	—	CSS class on root element.

See src/components/link/Link.model.ts for the full LinkProps type.

---

AIC Note

Use the standard import path in application code:

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

No separate /client or /lazy import selection is required in consumer code.

AIC components also support a priority flag for critical above-the-fold elements. This is most visible on Image (native preloading via <link rel="preload"> for above-the-fold content).

---

WCAG 2.2 Status

Criterion	Name	Status	Note
1.3.1	Info and Relationships (A)	✅ Fulfilled	Semantic structure (headings, lists, labels, landmarks) must be conveyed programmatically via HTML or ARIA.
2.1.1	Keyboard (A)	✅ Fulfilled	All functionality must be operable via keyboard alone, without requiring specific timing.
2.4.4	Link Purpose (In Context) (A)	🔍 Manual review	The purpose of every link must be determinable from the link text alone, or from its surrounding context.
2.4.7	Focus Visible (AA)	🔍 Manual review	A visible keyboard focus indicator must be present on every interactive element. Verify against the applied product theme.
2.4.11	Focus Not Obscured (Min.) (AA)	🔍 Manual review	The focused component must not be fully hidden by sticky headers, overlays, or other positioned page elements.
2.5.3	Label in Name (A)	🔍 Manual review	For components with a visible label, the accessible name must contain or match the visible label text.
4.1.2	Name, Role, Value (A)	✅ Fulfilled	Name, role, and state of all interactive UI components must be programmatically determinable via native HTML semantics or ARIA.

Test coverage: 2 jest-axe assertion(s) across 4 test file(s) · 0 ARIA attribute occurrence(s) in source scan. Criteria marked 🔍 require manual verification in the final product integration and theme context.

---

Design Tokens

Customise Link via CSS custom properties on :root or a scoped ancestor.

Token	Default	Description
--pk-link-color	color-mix(in srgb, var(--pk-color-fg) 55%, transparent)	Default link text color
--pk-link-color-hover	var(--pk-color-fg)	Link color on hover/focus when no color variant is set
--pk-link-color-primary	var(--pk-color-brand)	Color when color="primary"
--pk-link-color-secondary	var(--pk-color-accent)	Color when color="secondary"
--pk-link-color-info	color-mix(in srgb, var(--pk-color-fg) 35%, transparent)	Color when color="info"
--pk-link-color-success	var(--pk-color-success)	Color when color="success"
--pk-link-color-warning	var(--pk-color-warning)	Color when color="warning"
--pk-link-color-error	var(--pk-color-error)	Color when color="error"
--pk-link-color-white	var(--pk-palette-white)	Color when color="white"
--pk-link-color-variant-hover	color-mix(in srgb, var(--pk-color-fg) 55%, transparent)	Hover/focus color applied to colored variant links

---

Storybook

👉 Open Link in Storybook

---

Source

src/components/link/Link.model.ts