Navigation - Action link
Use action links to help users get to the next stage of a journey quickly by signposting the start of a digital service.
<div class="nhsuk-action-link">
<a class="nhsuk-action-link__link" href="https://www.nhs.uk/service-search/minor-injuries-unit/locationsearch/551">
<svg class="nhsuk-icon nhsuk-icon__arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="36" height="36">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 2a10 10 0 0 0-9.95 9h11.64L9.74 7.05a1 1 0 0 1 1.41-1.41l5.66 5.65a1 1 0 0 1 0 1.42l-5.66 5.65a1 1 0 0 1-1.41 0 1 1 0 0 1 0-1.41L13.69 13H2.05A10 10 0 1 0 12 2z"></path>
</svg>
<span class="nhsuk-action-link__text">Find a minor injuries unit</span>
</a>
</div>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Required | Description |
|---|---|---|---|
| Name text | Type string | Required true | Description Text to use within the action link component. |
| Name href | Type string | Required true | Description The value of the link href attribute. |
| Name openInNewWindow | Type boolean | Required false | Description If set to true, then the link will open in a new window. |
| Name classes | Type string | Required false | Description Classes to add to the anchor tag. |
| Name attributes | Type object | Required false | Description HTML attributes (for example data attributes) to add to the anchor tag. |
{% from 'action-link/macro.njk' import actionLink %}
{{ actionLink({
"text": "Find a minor injuries unit",
"href": "https://www.nhs.uk/service-search/minor-injuries-unit/locationsearch/551"
}) }}When to use action links
Use action links to signpost the start of a digital service.
When not to use action links
Do not use action links in forms. Use a button instead.
We don't use action links just to link to another page or site. If you need a link to stand out, you can use inset text.
How to use action links
Keep the words on the action link short. Start with a verb, for example: "Book an appointment" or "Apply for an EHIC card".
Action links usually sit in a block of text. You can also put one in a care card.
You can have more than one action link on a page but avoid putting them near each other.
Accessibility
The link colour and background colour contrast ratio is 5.76:1, which passes AAA guidelines at that font size.
Research
We tested the action links on health information pages with lots of content, callout boxes and multi-page navigation.
Users didn't notice early versions, so we made the size of the text larger than body text size.
We used NHS blue first but users didn't notice it. So we changed the arrow colour to green - our "action" colour. Users seemed to see the green better.
In follow-up tests on busy content pages, users pointed out the action links and said they found them useful.
Get in touch to share your research findings about this pattern.
Have you tested this component?
If so, please share your research findings and let us know how it has worked for you. This will help us improve it for everyone.
Before you start, you will need a GitHub account. It's an open forum where we collect feedback.
If you have any questions, you can message us on Slack. You will need a Slack account if you do not have one. Or you can contact us by email.
Updated: January 2019