ClipboardCopy

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

Beta
Not reviewed for accessibility

On this page

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::Beta::ClipboardCopy.new(value: "Text to copy", "aria-label": "Copy text to the system clipboard")) %>

With text instead of icons

Click to copy!

<%= render(Primer::Beta::ClipboardCopy.new(value: "Text to copy")) do %>
  Click to copy!
<% end %>

Copying from an element

src/index.js

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

Edit this page on GitHub