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.
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)
<%= 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
} %>