Skip to main content
v0.1 dev

Component 04 · Actions

Link

Navigate to another location or resource.

implementedPhase 2stable

Overview

Navigate to another location or resource. It transforms explicit intent into a command or navigation event without changing the accessible name during processing.

When to use

Use HE/Link when you need to navigate to another location or resource. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

Atlantic · interactive specimen
<a class="he-link he-link--standalone" href="#">Open Riverside Farm</a>

Anatomy

1Trigger
2Label or icon
3State feedback
4Audit result

Anatomy stays identical in Pasture and Atlantic. A responsive layout may wrap or stack parts, but reading order and focus order remain equivalent.

Variants and states

Variants

inlinestandaloneinverse

States

defaulthoverfocusvisiteddisabled

Accessibility

Describe the destination; do not use link styling for non-navigation actions.

  • Maintain a visible keyboard focus indicator and a logical focus sequence.
  • Never rely on colour alone for operational, freshness or severity state.
  • Keep touch targets at least 44 × 44 px unless the target is an inline text link.

Cross-platform contract

SurfaceCanonical nameStatus
FigmaHE/Linkstable
Web.he-linkimplemented
FlutterHeLinkimplemented
Token rootcomponent.linkgenerated