Navigation
Link
A link is an interactive, clickable element, usually text or an icon, that directs users to another page, website, or a specific section within the same page, acting as a fundamental tool for navigation and accessing more information
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features6 checks
- Always rendered as a semantic <a> element, never a <button> or <div>
- Disabled state uses aria-disabled="true" and tabIndex={-1} (not the HTML disabled attribute)
- External links announced by screen readers via descriptive aria-label or visually hidden text
- Focus ring of 3px solid in brand color meets 3:1 contrast requirement against backgrounds
- Visited color (#301c7d) meets 4.5:1 contrast on white backgrounds
- Icon-only links must include a visually hidden label for screen readers
When to use this component
✓Do's
- •The user is navigating to another page, an anchor on the same page, or an external resource
- •The destination is the point of the interaction, and nothing is submitted or changed
- •Text needs to be actionable inline, within a sentence or paragraph
- •You are linking to a document or download and can label the format and size
✗Don'ts
- •The action changes data or triggers a process, use Button so the semantics match
- •You need a prominent call to action, a link will not carry the visual weight
- •The label would read 'click here' or 'read more', link text must describe its destination
- •You are styling a link to look like a button without changing the underlying element
Do's and Don'ts
✓ Do's
Use the Default color for primary links, distinguish Visited links with #301c7d to provide browser-history context, and use the external icon for links that open outside the service.
✗ Don'ts
Don't use button styling for inline text links, use the Link component. Avoid vague labels like "click here" that provide no context for screen reader users scanning a page.