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
| Name | Type | Default | Description |
|---|
aria-label | String | N/A | String that will be read to screenreaders when the component is focused |
value | String | nil | Text to copy into the users clipboard when they click the component. |
for | String | N/A | Element id from where to get the copied value. |
system_arguments | Hash | N/A | System arguments |
Examples
Default
<%= render(Primer::ClipboardCopy.new(value: "Text to copy", "aria-label": "Copy text to the system clipboard")) %>
With text instead of icons
<%= 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
<%= render(Primer::ClipboardCopy.new(for: "blob-path", "aria-label": "Copy text to the system clipboard")) %>
<div id="blob-path">src/index.js</div>