Action Link

Props

• href: string (required) -- the URL the link points to
• label: string (optional) -- accessible label override for screen readers via aria-label
• children: slot (required) -- the link content (text or mixed content)

Keyboard Interactions

• Tab: Focus the link (native browser behavior)
• Enter: Activate the link (native browser behavior)

ARIA

• Implicit link role from the <a> element
• aria-label -- optional override for screen reader text when the visible link text does not fully convey the action

When to Use

• Use to signpost the start of a digital service or key navigational step, such as "Find a GP near you" or "Book an appointment".
• Use on content-heavy pages where a key action needs visual emphasis beyond a standard inline link.
• Use when the link represents a significant next step in the user's journey, not routine navigation.
• Use within text blocks or care cards to draw attention to an actionable pathway.

When Not to Use

• Do not use within forms -- use Button for form actions and submissions.
• Do not use for general page-to-page navigation -- use a standard anchor link or BreadcrumbNav instead.
• Do not use when emphasis is not needed -- use InsetText for highlighted content without an action.
• Do not use for returning to a previous page -- use BackLink instead.

Headless

This component provides a semantic <a> element with optional aria-label override and zero visual styling. The consumer is responsible for all CSS including colors, font weight, underline styles, hover effects, focus indicators, and any arrow or icon decoration.

Styles

The consumer provides all CSS styling. The component renders with a .action-link class for targeting. No default styles are included — this is a fully headless component.

Testing

• Verify the component renders a <a> element with class action-link
• Verify aria-label` -- optional override for screen reader text when the visible link text does not fully convey the action
• Verify keyboard interactions work correctly
• Verify pass-through attributes are applied

Advice

• Designers: Make action links visually distinct from standard inline links using size, weight, or an arrow icon to signal their importance as key navigational steps.
• Developers: Use the label prop to provide expanded screen reader text when the visible link text is ambiguous, such as providing "Find a GP near your postcode" for a link that just reads "Find a GP".

Implementation Notes

• Renders as a simple semantic <a> element
• Supports aria-label override via the label prop for when the visible link text is insufficient for screen readers
• Uses slot for children content (text, mixed content, etc.)
• Passes through all additional HTML anchor attributes via ...restProps
• No hardcoded user-facing strings; all text comes through children and props

Related components

• call-to-action — a prominent prompt encouraging user action
• back-link — a navigation link to return to a previous page
• go-to-top — a link that returns users to the top of a long page
• skip-link — a hidden link for keyboard users to skip to main content

References

• Inspired by NHS England action link pattern
• WAI-ARIA link role: https://www.w3.org/TR/wai-aria-1.2/#link