Component
Copy to clipboard
Content that a user is intended to copy, like a URL
How it looks (preview) (preview all)
How to call this component
<%= render "govuk_publishing_components/components/copy_to_clipboard", {
label: "Copy and send this link to someone and they’ll be able to preview your draft on GOV.UK.",
copyable_content: "http://www.example.org",
button_text: "Copy link"
} %>
Accessibility acceptance criteria
- should be usable with keyboard
Other examples
With data attributes (preview)
<%= render "govuk_publishing_components/components/copy_to_clipboard", {
label: "Copy and send this link to someone and they’ll be able to preview your draft on GOV.UK.",
copyable_content: "http://www.example.org",
input_data_attributes: {
"tracking-code": "GA-123ABC"
},
button_text: "Copy link",
button_data_attributes: {
"tracking-code": "GA-123ABC"
}
} %>