Copy Button

[DJlumb]

What

The component is a button that is already being used in the design system to copy a piece of code. I am proposing to re-purpose this and use it as a component for use to copy pieces of text, links or codes.

Why

It should be included in the design system for a number of reasons. Firstly it is widely used outside of the GOVUK ecosystem to copy voucher codes in Ecommerce so it's a familiar action for users and expected behavior. Also it's useful for the convenience of copying a piece of text to save time particularly on mobile where it enhances the experience at times when it can be cumbersome to copy a piece of code. Accessibility is another factor also whereby people with low dexterity and partially sighted users can tab through using screen readers to copy a piece of text which is a lot easier than using voice commands to instruct the curser to highlight and then copy a piece of text.

Having been used this on our service for 8-9 months there has been requests from other services to use it such as the agents team who have requested and been sent the code to be used on this page and in other areas where a link is needed to be copied

It would also be useful for all other areas of government whereby a code needs to be copied or a link/piece of text is copied.

The code is already being used successfully in our service and has tested very well with users for those who copy the text to their notes or onto an email - It's also tested well with mobile users. Also as most licence applications on going online now that they will be able to copy this directly into their application.

This doesn't exist currently in GDS as a component but does exist to copy a piece of code so hopefully this should aid development.

Example of where it is used

Anything else

The button has tested very well in all our applicant UR rounds and is currently being used in our live service which went live on the 4th April
https://www.gov.uk/guidance/complete-a-tax-check-for-a-taxi-private-hire-or-scrap-metal-licence
We found that this tested very well in our UR in applicant Rounds. It was always received well and benefitted the user.
( user research )

This is how it could be included in code
<div class="govuk-!-margin-top-2"> {{ copyButtonMacro.copyButton({ clip: '266RLRTK6', copyContent: 'Copy your tax check code', copiedContent: 'Tax check code copied' }) }} </div>

[Alexed93]

Any progress on this one folks? Hoping to implement a similar button within a MoJ project, but the grey styling isn't testing well (it's not obvious enough!).

[charlottefountaine]

I am also using this button in a project 'Book a live animal inspection' DEFRA Sept 2024.

[joelanman]

I wonder if this is a situation where an icon could help - from a google seems like two documents on top of each other is quite common

[simonwhatley]

The GOV.UK publishing components have a copy to clipboard component worth considering. The component uses a ghost rather than a secondary button, but that's an easy change.