Skip to content

ClipboardCopy

Beta
This component requires JavaScript to function. Please refer to the Installation section to set it up.

Use ClipboardCopy to copy element text content or input values to the clipboard.

Accessibility

Always set an accessible label to help the user interact with the component.

Arguments

NameTypeDefaultDescription
aria-labelStringN/AString that will be read to screenreaders when the component is focused
valueStringnilText to copy into the users clipboard when they click the component.
forStringN/AElement id from where to get the copied value.
system_argumentsHashN/ASystem arguments

Examples

Default

<%= render(Primer::ClipboardCopy.new(value: "Text to copy", "aria-label": "Copy text to the system clipboard")) %>

With text instead of icons

Click to copy!
<%= render(Primer::ClipboardCopy.new(value: "Text to copy", "aria-label": "Copy text to the system clipboard")) do %>
Click to copy!
<% end %>

Copying from an element

src/index.js
<%= render(Primer::ClipboardCopy.new(for: "blob-path", "aria-label": "Copy text to the system clipboard")) %>
<div id="blob-path">src/index.js</div>