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.

Print this page

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

With data attributes (preview)

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

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
} %>