Component

Copy to clipboard

Content that a user is intended to copy, like a URL

Search for usage of this component on GitHub.

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: {
    an_attribute: "for the input"
  },
  button_text: "Copy link",
  button_data_attributes: {
    another_attribute: "for the button"
  }
} %>