Print link

Skip to HTML example

When to use this component

Use the print link component when users are likely to want a physical or PDF copy of the page content, such as:

  • confirmation pages after completing a transaction
  • reference information that users may want to keep
  • detailed guidance or instructions
  • receipts or summaries of submitted information

When not to use this component

Avoid using the print link component on pages where:

  • the content is primarily interactive or dynamic
  • the page contains forms that need to be completed online
  • the content is frequently updated and printed versions would quickly become outdated

How it works

The print link component displays a button that triggers the browser's native print dialog when clicked.

The component uses the govuk-!-display-none-print utility class to hide the button when printing, so it won't appear on the printed page.

The button requires JavaScript to function. The click handler is attached by the DfEComponents.PrintLink class, which is initialised automatically when DfEComponents.initAll() is called.

For the button to appear, either JavaScript must be enabled (via the .govuk-frontend-supported class on the body) or you can add the dfe-print-link--show-without-js class to show it without JavaScript support checking.

Accessibility

The print link component is accessible and follows GOV.UK Design System patterns:

  • Uses a semantic <button> element for the action
  • The printer icon uses aria-hidden="true" and focusable="false" to hide it from assistive technologies
  • Clear, descriptive button text that explains the action
  • Visible focus states that meet WCAG 2.1 requirements

HTML examples

Copy the HTML from this page directly into your web template.

Default print link

The default print link with a printer icon.

Default print link

<div class="dfe-print-link govuk-!-display-none-print govuk-!-margin-bottom-3">
  <button class="dfe-print-link__button" type="button">
    <svg class="dfe-print-link__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 18" aria-hidden="true" focusable="false">
      <path d="M14 5H2a2 2 0 0 0-2 2v5h3v4h10v-4h3V7a2 2 0 0 0-2-2zm-1 10H3v-4h10v4zm1-7a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-1-6H3V0h10v2z"/>
    </svg>
    Print this page
  </button>
</div>
Warning This is a basic web template page layout with a logged-in user check and does not include additional liquid items which are commonplace on a CRM Portal. 
{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block title %}{% endblock %}

{% block main %}

{% unless user %}
  <script>
    window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
  </script>
{% endunless %}

<div class="dfe-print-link govuk-!-display-none-print govuk-!-margin-bottom-3">
  <button class="dfe-print-link__button" type="button">
    <svg class="dfe-print-link__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 18" aria-hidden="true" focusable="false">
      <path d="M14 5H2a2 2 0 0 0-2 2v5h3v4h10v-4h3V7a2 2 0 0 0-2-2zm-1 10H3v-4h10v4zm1-7a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-1-6H3V0h10v2z"/>
    </svg>
    Print this page
  </button>
</div>


{% endblock %}

Print link without icon

A simpler version without the printer icon.

Print link without icon

<div class="dfe-print-link govuk-!-display-none-print govuk-!-margin-bottom-3">
  <button class="dfe-print-link__button" type="button">
    Print this page
  </button>
</div>
Warning This is a basic web template page layout with a logged-in user check and does not include additional liquid items which are commonplace on a CRM Portal. 
{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block title %}{% endblock %}

{% block main %}

{% unless user %}
  <script>
    window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
  </script>
{% endunless %}

<div class="dfe-print-link govuk-!-display-none-print govuk-!-margin-bottom-3">
  <button class="dfe-print-link__button" type="button">
    Print this page
  </button>
</div>


{% endblock %}

If you would like any additional advice or guidance with using these examples on Power Pages, please contact the Solutions Delivery Team.