1. Component Guide
  2. Action link
Component

Action link

Use action links to help users get to the next stage of a journey quickly.

Search for usage of this component on GitHub

How it looks (preview) (preview all)

How to call this component

<%= render "govuk_publishing_components/components/action_link", {
  text: "Go to NHS 111 online",
  href: "/page"
} %>

Accessibility acceptance criteria

Links in the component must:

  • accept focus
  • be focusable with a keyboard
  • be usable with a keyboard
  • indicate when they have focus
  • change in appearance when touched (in the touch-down state)
  • change in appearance when hovered
  • be usable with touch
  • be usable with voice commands
  • have visible text
  • have meaningful text

Other examples

With bottom margin (preview)

<%= render "govuk_publishing_components/components/action_link", {
  text: "Look at this margin",
  href: "/page",
  margin_bottom: 9
} %>

With data attributes (preview)

<%= render "govuk_publishing_components/components/action_link", {
  text: "Coronavirus (COVID-19)",
  href: "/page",
  data: {
    attr_test: "hasDataAttribute"
  }
} %>

With js classes (preview)

Use js- prefixed classes only as interaction hooks – to query and operate on elements via JavaScript. Classes are added to the link itself.

<%= render "govuk_publishing_components/components/action_link", {
  text: "Coronavirus (COVID-19)",
  href: "/page",
  classes: "js-hook"
} %>

With no wrapping text (preview)

<%= render "govuk_publishing_components/components/action_link", {
  text: "Coronavirus (COVID-19):",
  nowrap_text: "what you need to do",
  href: "/page"
} %>

With light text (preview)

<%= render "govuk_publishing_components/components/action_link", {
  text: "Coronavirus (COVID-19)",
  href: "/page",
  light_text: true
} %>

With transparent svg (preview)

<%= render "govuk_publishing_components/components/action_link", {
  text: "Find out what you need to do",
  href: "/page",
  light_text: true,
  transparent_icon: true
} %>

With subtext (preview)

<%= render "govuk_publishing_components/components/action_link", {
  text: "Emergency something",
  href: "/page",
  subtext: "This is about the emergency"
} %>

With subtext on a dark background (preview)

<%= render "govuk_publishing_components/components/action_link", {
  text: "Emergency something",
  href: "/page",
  subtext: "This is about the emergency that is happening right now unfortunately so pay attention",
  light_text: true
} %>

Mobile subtext (preview)

Lock the subtext beneath the main text, so the component with subtext always appears as it does on mobile.

<%= render "govuk_publishing_components/components/action_link", {
  text: "Try not to panic now",
  href: "/page",
  subtext: "The thing that is happening is pretty scary but we'll get through it",
  mobile_subtext: true
} %>

With link on subtext (preview)

The subtext can also be a link if required. The link on the main text is optional.

<%= render "govuk_publishing_components/components/action_link", {
  text: "Remain calm",
  subtext: "Better things are ahead",
  subtext_href: "/page"
} %>

With link on subtext on a dark background (preview)

<%= render "govuk_publishing_components/components/action_link", {
  text: "Remain calm",
  subtext: "Better things are ahead",
  subtext_href: "/page",
  light_text: true
} %>

Simple arrow (preview)

<%= render "govuk_publishing_components/components/action_link", {
  text: "Getting financial help and keeping your business safe",
  href: "/financial-help",
  simple: true
} %>

Simple light arrow (preview)

<%= render "govuk_publishing_components/components/action_link", {
  text: "Getting financial help and keeping your business safe",
  href: "/financial-help",
  light_text: true,
  simple_light: true
} %>

With small icon (preview)

<%= render "govuk_publishing_components/components/action_link", {
  text: "Coronavirus (COVID-19)",
  href: "/my-test-page",
  small_icon: true
} %>

With dark icon (preview)

<%= render "govuk_publishing_components/components/action_link", {
  text: "Coronavirus (COVID-19)",
  href: "/my-test-page",
  dark_icon: true
} %>

With nhs icon (preview)

<%= render "govuk_publishing_components/components/action_link", {
  text: "Something about the NHS",
  subtext: "Perhaps you'd like to click here",
  subtext_href: "/page",
  mobile_subtext: true,
  nhs_icon: true
} %>