Clipboard

Overview

A button to copy the text to the system clipboard.

By default it will copy the current URL, but it can also copy the text of an element, or arbitrary content set as a property on the component.

Installation

npm install @patternfly/pfe-clipboard

Usage

Default

<pfe-clipboard></pfe-clipboard>

Optionally hide the icon

<pfe-clipboard no-icon></pfe-clipboard>

Override the link text

<pfe-clipboard>
  <span slot="label">You can copy this url</span>
</pfe-clipboard>

Copying text from element with custom button text

<pfe-clipboard copy-from="#textToCopy">
  <span slot="label">This will copy the text in the text field below!</span>
</pfe-clipboard>
<input type="text" id="textToCopy" value="This text will be copied!"></input>

Copying text from property

<pfe-clipboard copy-from="property" id="propertyCopy">
</pfe-clipboard>
<script>
  window.addEventListener('load', function() {
    document.getElementById('propertyCopy').contentToCopy = '    <h2>Clipboard: with custom text & copying text from element</h2>\n    <pfe-clipboard copy-from="#textToCopy">\n      <span slot="label">This will copy the text in the text field below!</span>\n      <span slot="success">Making some copies!</span>\n    </pfe-clipboard>\n    <input type="text" id="textToCopy" value="This text will be copied!!"></input>';
  })
</script>

Override the copied notification text

<pfe-clipboard>
  <span slot="success">URL Copied to clipboard</span>
</pfe-clipboard>

Override the icon

<pfe-clipboard>
  <pfe-icon slot="icon" icon="web-icon-globe"></pfe-icon>
</pfe-clipboard>

Override all slots

<pfe-clipboard>
  <span slot="label">Copy this article URL</span>
  <span slot="success">URL Copied to clipboard</span>
  <pfe-icon slot="icon" icon="web-icon-globe"></pfe-icon>
</pfe-clipboard>

Specify the amount of seconds the copy success text should be visible

<pfe-clipboard copied-duration="5"></pfe-clipboard>

Accessibility

<pfe-clipboard> implements many features of a standard button to provide an accessible experience for all users. By default, role="button" and tabindex="0" are added to inform assistive technology that <pfe-clipboard> should be treated as a button. It listens for mouse clicks as well as enter and space key presses per the recommendation of w3.org.

Slots

label

Optionally override the button's label.

icon

Optionally override the default link svg icon. You can inline svg <svg slot="icon"></svg> or use pfe-icon. For example:

<pfe-icon slot="icon" icon="web-icon-globe"></pfe-icon>

success

Optionally override the text of the success state which defaults to Copied.

Attributes

no-icon

Optional boolean attribute that, when present, removes the icon from the template.

DOM Property

noIcon

Type

boolean

Default

false

copied-duration

Specify the amount of time in seconds the copy success text should be visible.

DOM Property

copiedDuration

Type

number

Default

4

on

Sets color theme based on parent context

DOM Property

on

Type

ColorTheme | undefined

Default

unknown

copy-from

Defaults to url, decides what should be copied. Possible values are:

• url Will copy the current page's URL.
• property Will copy the text from contentToCopy method of the component.
• A DOMString (e.g. #copyTarget or .code-sample pre) will query for the given selector within the element's root (e.g. document or a shadow root) and take the found element's innerText on most elements or value on form fields as the text to be copied.

DOM Property

copyFrom

Type

string|'url'|'property'

Default

'url'

DOM Properties

contentToCopy

A setter to set the content you would like to copy. Only works if copy-from attribute is set to property. Recommend using connected event to know when the component's setter is ready.

Type

string|null

Default

null

Methods

copyTextToClipboard(text: string)

Copy arbitrary text to system clipboard

If available, it will use the Clipboard API to access the system clipboard

If Clipboard is unavailable, it will use the legacy execCommand

document.querySelector("pfe-clipboard").copyTextToClipboard(text)
.then(res => console.log(`Successfully copied: ${res}`))
.catch(error => console.error(error));

Events

copied

fired when the user clicks the element and copies the text. Read the copied text from the event.copiedText property.

Event Type:

CopiedEvent

CSS Custom Properties

CSS Shadow Parts

None