ClipboardCopyComponent | Your awesome title

import Example from ‘../../src/@primer/gatsby-theme-doctocat/components/example’ import RequiresJSFlash from ‘../../src/@primer/gatsby-theme-doctocat/components/requires-js-flash’

Use ClipboardCopyComponent 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
`tag`	`Symbol, String`	`:clipboard-copy`	The rendered tag name
`classes`	`String`	`""`	Classes and attributes
`value`	`String`	`""`	Text to copy into the users clipboard when they click the component.
`for_id`	`String`	`nil`	If `value` is not provided, the element with this id will be copied.
`aria_label`	`String`	`""`	Text for accessibility. Can also be passed in as part of `attributes`, but it must be present.
`attributes`	`Hash`	`{}`	Classes and attributes

Slots

`Tooltip`

Tooltip that appears on mouse hover or keyboard focus over the button. Use tooltips sparingly and as a last resort. Important: This tooltip defaults to type: :description. In a few scenarios, type: :label may be more appropriate. Consult the TooltipComponent documentation for more information.

Name	Type	Default	Description
`tag`	`Symbol, String`	N/A	The rendered tag name
`text`	`String`	N/A	The text content of the tooltip. This should be brief and no longer than a sentence.
`direction`	`Symbol`	N/A	One of `:bottom`, `:left`, `:right`, or `:top`.
`classes`	`String`	N/A	Classes and attributes
`attributes`	`Hash`	N/A	Same arguments as TooltipComponent.

Examples

Default

<%= render(Ariadne::ClipboardCopyComponent.new(value: "Text to copy", aria_label: "Copy text to the system clipboard" )) %>

With text instead of icons

<%= render(Ariadne::ClipboardCopyComponent.new(value: "Text to copy", aria_label: "Copy text to the system clipboard" )) do %>
  Click to copy!
<% end %>

Copying from an element

<%= render(Ariadne::ClipboardCopyComponent.new(for_id: "blob-path", aria_label: "Copy text to the system clipboard" )) %>
<div id="blob-path">src/index.js</div>