Component 04 · Actions
Link
Navigate to another location or resource.
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
<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
States
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
| Surface | Canonical name | Status |
|---|---|---|
| Figma | HE/Link | stable |
| Web | .he-link | implemented |
| Flutter | HeLink | implemented |
| Token root | component.link | generated |