Components / primitives

primitives · @awesome-ds/react

Link

Semantic navigation link styled with accent.

Rules: rule.a11y.wcag-aa, rule.interaction.interface-quality

State matrix

idlerequired
hoverrequired
focusrequired
visitedrequired

Anatomy

  • anchor
  • link text
  • optional external cue

Keyboard contract

Tab focuses; Enter follows the href using native anchor behavior.

Screen-reader contract

Announces as a link with meaningful destination text.

Content rules

  • Name the destination.
  • Avoid bare URLs and vague read-more labels.

Public API

PropTyperequiredDescription
hrefstringrequiredNavigation destination
childrenReactNoderequiredDestination label
…nativeOmit<AnchorHTMLAttributes<HTMLAnchorElement>, "href">—Native anchor attributes

Adaptation contracts

RTL
Preserve icon meaning, use logical spacing, and mirror only directional artwork.
High contrast
Keep native outlines and a visible text or border affordance in forced colors.
Reduced motion
Remove hover travel and loading flourish while retaining immediate state feedback.

Verification IDs

Link/renders-href

Live

Live

Open Atlas

Copyable example

import { Link } from "@awesome-ds/react";

<Link href="/references">Atlas</Link>