Action link

These examples are used for automated tests and may not follow service manual best practice.

Action link default

Open this example in a new tab: Action link default

Code

Markup

<a class="nhsuk-action-link" href="#">
  <svg class="nhsuk-icon nhsuk-icon--arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z"/>
  </svg>
  <span class="nhsuk-action-link__text">Find your nearest A&amp;E</span>
</a>

Macro

{% from "action-link/macro.njk" import actionLink -%}

{{ actionLink({
  text: "Find your nearest A&E",
  href: "#"
}) }}

Action link reverse default

Open this example in a new tab: Action link reverse default

Find your nearest A&E

Code

Markup

<a class="nhsuk-action-link nhsuk-action-link--reverse" href="#">
  <svg class="nhsuk-icon nhsuk-icon--arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z"/>
  </svg>
  <span class="nhsuk-action-link__text">Find your nearest A&amp;E</span>
</a>

Macro

{% from "action-link/macro.njk" import actionLink -%}

{{ actionLink({
  text: "Find your nearest A&E",
  href: "#",
  variant: "reverse"
}) }}

Action link as a button

Open this example in a new tab: Action link as a button

Code

Markup

<button class="nhsuk-action-link" type="submit">
  <svg class="nhsuk-icon nhsuk-icon--arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z"/>
  </svg>
  <span class="nhsuk-action-link__text">Find your nearest A&amp;E</span>
</button>

Macro

{% from "action-link/macro.njk" import actionLink -%}

{{ actionLink({
  text: "Find your nearest A&E",
  element: "button"
}) }}

Action link reverse as a button

Open this example in a new tab: Action link reverse as a button

Code

Markup

<button class="nhsuk-action-link nhsuk-action-link--reverse" type="submit">
  <svg class="nhsuk-icon nhsuk-icon--arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z"/>
  </svg>
  <span class="nhsuk-action-link__text">Find your nearest A&amp;E</span>
</button>

Macro

{% from "action-link/macro.njk" import actionLink -%}

{{ actionLink({
  text: "Find your nearest A&E",
  element: "button",
  variant: "reverse"
}) }}