Print link
A link with a print icon to help users print the current page.
When to use this component
This component is used to print a single page. In the context of a multi-page guide (opens in a new tab) a “View a printable version of the whole guide” link is instead added at the bottom of the page. This link leads to a print version (opens in a new tab) of the complete guide which thes has the print link component at the top of the page.
How it works
When user selects the button the browser’s print modal appears.
For multi-paged content the end-user is directed to a new page that compiles the multi-page content into a single webpage, followed by the appearance of the browser’s print.
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.
View this component and all its variations in the Component Guide (opens in a new tab).
| Date | Description | Document | Format |
|---|---|---|---|
| February 2024 | The border colour was changed to a darker shade of grey to address accessibility concerns as the earlier border had little colour contrast |
Accessibility 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
Existing issues with this component
- Not all pages display the print link. (opens in a new tab)
- Where print link is repeated at the top and bottom of a page the lock-up is currently inconsistent. (opens in a new tab)
- In dark mode the icon is not visible. (opens in a new tab)
How to report an issue
If you happen to come across an issue:
- Report it on Github (opens in a new tab).
- Once the issue has been added, update this document by adding the title and Github Issue’s link.
- Give yourself a high-five.
Help improve this page
To help make sure that this page is useful, relevant and up to date, submit a GitHub issue (opens in a new tab) with your proposed updates.