PatternFly Elements - Home PatternFly Elements

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>
You can copy this url
<pfe-clipboard>
<span slot="label">You can copy this url</span>
</pfe-clipboard>

Copying text from element with custom button text

This will copy the text in the text field below!
<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

URL Copied to clipboard
<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

Copy this article URL URL Copied to clipboard
<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.

Deprecated Slots

text

Optionally override the button's label .

Note: text is deprecated.

use label

text--success
Note: text--success is deprecated.

use success

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

Deprecated Events

pfe-clipboard:connected

Let's you know when the component has run connectedCallback, useful for knowing when you can set the contentToCopy property and know that it will work.

Note: pfe-clipboard:connected is deprecated.

use await element.updateComplete

Event Type:
CustomEvent<{ component: PfeClipboard }>
pfe-clipboard:copied

Fires when the current url is successfully copied the user's system clipboard.

detail: {
url: string
}

Note: pfe-clipboard:copied is deprecated.

use copied

Event Type:
CustomEvent<{ component: PfeClipboard }>

CSS Custom Properties

CSS Property Description Default
--pfe-clipboard--Color

var(--pfe-broadcasted--link, #06c)

--pfe-clipboard--Color--focus

var(--pfe-broadcasted--link--focus, #004080)

--pfe-clipboard--Color--hover

var(--pfe-broadcasted--link--hover, #004080)

--pfe-clipboard--FontWeight

var(--pfe-theme--font-weight--light, 300)

--pfe-clipboard--FontSize

1rem

--pfe-clipboard--Padding

6px 16px

--pfe-clipboard--icon--Width

icon region

16px

--pfe-clipboard--icon--Height

icon region

auto

--pfe-clipboard--icon--margin

icon region

0 0.4825rem 0 0

--pfe-clipboard--icon--Color

icon region

var(--pfe-theme--color--text--muted, #6a6e73)

--pfe-clipboard--icon--Color--hover

icon region

var(--pfe-theme--color--ui-base--hover, #151515)

--pfe-clipboard--icon--Color--dark

icon region

var(--pfe-theme--color--text--muted--on-dark, #d2d2d2)

--pfe-clipboard--icon--Color--dark--hover

icon region

var(--pfe-theme--color--text--on-dark, #fff)

--pfe-clipboard--icon--Color--saturated

icon region

var(--pfe-theme--color--text--muted--on-saturated, #d2d2d2)

--pfe-clipboard--icon--Color--saturated--hover

icon region

var(--pfe-theme--color--text--on-saturated, #fff)

CSS Shadow Parts

None