BaseLink works in both server and client environments. Always use the standard import (e.g. @prokodo/ui/base-link) — the library detects the runtime automatically.
BaseLink
BaseLink is the foundational link primitive in @prokodo/ui. It renders as <a> in server contexts and handles both internal and external navigation. Used internally by Button, Card, and other components that support redirect props.
Overview
import { BaseLink } from "@prokodo/ui/base-link"
;<BaseLink href="/docs/intro" className="my-link">
Read the docs
</BaseLink>
Import
import { BaseLink } from "@prokodo/ui/base-link"
Styling is handled via design tokens — no additional CSS import required.
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
href | string | — | — | Destination URL (from AnchorHTMLAttributes). |
target | string | — | — | Link target (_blank, etc.) from AnchorHTMLAttributes. |
rel | string | — | — | Rel attribute from AnchorHTMLAttributes. |
linkComponent | ComponentType | — | — | Custom link component (e.g. Next.js Link). |
children | ReactNode | — | — | Link content (from AnchorHTMLAttributes). |
className | string | — | — | CSS class on anchor element. |
See
src/components/base-link/BaseLink.model.tsfor the fullBaseLinkPropstype.
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) | ✅ Fulfilled | 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: 4 jest-axe assertion(s) across 5 test file(s) · 2 ARIA attribute occurrence(s) in source scan. Criteria marked 🔍 require manual verification in the final product integration and theme context.