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)

Copy and send this link to someone and they’ll be able to preview your draft on GOV.UK.

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)

Copy and send this link to someone and they’ll be able to preview your draft on GOV.UK.

<%= 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"
  }
} %>