Component

Print link

A link with a print icon to help users print the current page

This component renders two different outputs depending on whether a href is specified. By default, when no href is given, the component renders as a button and triggers a print action via JavaScript. In this case the component is hidden in environments where JavaScript is disabled and can be used as a progressive enhancement. When a href is specified the component renders as an anchor tag and navigates to that href without JavaScript, suitable for applications which have paths that trigger a print event on load.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

How to call this component

<%= render "govuk_publishing_components/components/print_link", {
} %>

Accessibility acceptance criteria

• The print icon must be presentational and ignored by screen readers.

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 different text (preview)

<%= render "govuk_publishing_components/components/print_link", {
  text: "Print this manual"
} %>

With different href (preview)

You can specify a alternative href URL that will override the default behaviour. When a href is specified the print link will render as an anchor tag and be displayed even when JavaScript is disabled.

<%= render "govuk_publishing_components/components/print_link", {
  href: "/print"
} %>

With data attributes (preview)

Data attributes can be passed to the component as shown.

Note that the component does not include built in tracking. If this is required consider using the track click script.

<%= render "govuk_publishing_components/components/print_link", {
  data_attributes: {
    "track-category": "printButton",
    "track-action": "clicked",
    "track-label": "Print this page"
  }
} %>

With custom data module (preview)

The component includes its own data-module but others can be passed in addition if required, for example to apply tracking to an element. This will be included along with the components own data-module.

<%= render "govuk_publishing_components/components/print_link", {
  data_attributes: {
    module: "gem-track-click"
  }
} %>

With custom margins (preview)

The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale. It defaults to having margin level 3 on top and bottom.

<%= render "govuk_publishing_components/components/print_link", {
  margin_top: 0,
  margin_bottom: 4
} %>