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.

Open this default action link example in new window
Copy default action link code 
<div class="hs2-action-link">
  <a class="hs2-action-link__link" href="/design-system/components/buttons">
    <svg class="hs2-icon hs2-icon__arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="36" height="36">

      <g mask="url(#mask0_1_88)">
        <path d="M12 20.2L10.1 18.35L15.125 13.325H3.80005V10.675H15.125L10.1 5.64999L12 3.79999L20.2001 12L12 20.2Z" />
      </g>

    </svg>
    <span class="hs2-action-link__text">Take a look at the button component</span>
  </a>
</div>
Close default action link code
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.

Nunjucks arguments for default action link
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.
Copy default action link code 
{% from 'action-link/macro.njk' import actionLink %}

{{ actionLink({
  "text": "Take a look at the button component",
  "href": "/design-system/components/buttons"
}) }}
Close default action link code

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.

Keep the words on the action link short. Start with a verb.

Action links usually sit in a block of text.

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.