CatalystLinkv0.4.2Documentation Under Review
An accessible anchor component with configurable underline behavior, text wrapping, disabled state, and polymorphic rendering via asChild. Built on standard HTML with Catalyst design tokens.
Prefer AI-assisted development?
Catalyst Link wraps the standard HTML <a> element with built-in design tokens, CVA variants for underline and wrap control, and a disabled state — giving you a production-ready link with zero configuration.
Installation
npm install @pmi/catalyst-linkimport { Link } from '@pmi/catalyst-link';Variants
Underline Auto
The default. Underline appears on hover, providing a clean appearance at rest.
Underline Always
Permanently underlined — best for body text where link affordance must be clear without hover.
Underline Hover
Underline appears on hover only, identical to auto in most contexts.
Underline None
No underline — use when the link's context or styling already communicates its interactive nature.
Sizes
Common Patterns
Disabled
Truncated Text
Wrap Options
API Reference
Link (Marketing)
Prop
Type
Link (Product)
The product variant accepts the same props as the marketing variant. The size values (xs, sm, md, lg) are identical, but they map to different internal scale values — the product variant uses denser spacing and smaller type sizes suited for application UIs.
Accessibility
Link is designed to meet WCAG 2.2 AA standards.
ARIA attributes
- Uses the native
<a>element, providing built-in link semantics for assistive technologies. - When
disabledis set,hrefis removed andpointer-events-noneis applied — the element remains in the DOM but is inert. Consider removing disabled links from the DOM when appropriate, as screen readers may still announce them. - For external links, always pair
target="_blank"withrel="noopener noreferrer"to prevent reverse tabnapping and avoid leaking the opener reference. - Use
asChildwith<NextLink>or React Router's<Link>to preserve native link semantics while enabling client-side navigation.
WCAG 2.2 AA criteria addressed:
- 1.4.3 Contrast (Minimum) — default text colors (
pmi-off-black-800/white) meet the 4.5:1 minimum. Verify contrast when applying customclassNameoverrides. - 2.4.4 Link Purpose (In Context) — provide descriptive link text; avoid generic labels like "click here".
- 2.4.7 Focus Visible — a
focus-visiblering is applied automatically; visible focus indicators satisfy this criterion. - 3.2.4 Consistent Identification — use
underlinevalues consistently across your site so links are predictably identified by visual style.
Choosing the Right Component
Use Link when you need to navigate to a URL. Reach for a different primitive when:
| If you need… | Use instead |
|---|---|
| An action that doesn't navigate (submit, open modal, toggle state) | Button |