PatternFly Elements - Home PatternFly Elements

Clipboard

Overview

A button to copy the current URL to the system clipboard.

Installation

npm install @patternfly/pfe-clipboard

Usage

Default

<pfe-clipboard role="button" tabindex="0"></pfe-clipboard>

Optionally hide the icon

<pfe-clipboard no-icon role="button" tabindex="0"></pfe-clipboard>
You can copy this url
<pfe-clipboard role="button" tabindex="0">
  <span slot="text">You can copy this url</span>
</pfe-clipboard>

Override the copied notification text

URL Copied to clipboard
<pfe-clipboard role="button" tabindex="0">
  <span slot="text--success">URL Copied to clipboard</span>
</pfe-clipboard>

Override the icon

<pfe-clipboard role="button" tabindex="0">
  <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 role="button" tabindex="0">
  <span slot="text">Copy this article URL</span>
  <span slot="text--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 role="button" tabindex="0" 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

text

Optionally override the text of the button.

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>.

text--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.

copied-duration

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

Methods

copyURLToClipboard()

Copy url to the user's system clipboard

If available, it will use the new Navigator API to access the system clipboard. If unavailable, it will use the legacy execCommand("copy").

Returns

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

Events

pfe-clipboard:copied

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

detail: {
  url: String
}

Styling hooks

Variable name Default value Region
--pfe-clipboard--Color var(--pfe-broadcasted--link, #06c) N/A
--pfe-clipboard--FontWeight var(--pfe-theme--font-weight--light, 300) N/A
--pfe-clipboard--FontSize 1rem N/A
--pfe-clipboard--Padding 6px 16px N/A
--pfe-clipboard--icon--Width 16px icon
--pfe-clipboard--icon--Height auto icon
--pfe-clipboard--icon--margin 0 0.4825rem 0 0 icon
--pfe-clipboard--icon--Color #6a6e73 icon
--pfe-clipboard--Color--focus var(--pfe-broadcasted--link--focus, #004080) N/A
--pfe-clipboard--Color--hover var(--pfe-broadcasted--link--hover, #004080) N/A