Skip to content
Versions v3 v2 v1

Clipboard Copy

The clipboard copy component allows users to quickly and easily copy content to their clipboard.

Installation

We recommend loading elements via a CDN such as JSPM and using an import map to manage your dependencies.

For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

If you are using node and NPM, you can install this component using npm:

npm install @patternfly/elements

Then import this component into your project by using a bare module specifier:

import '@patternfly/elements/pf-clipboard-copy/pf-clipboard-copy.js';

Please Note You should either load elements via a CDN or install them locally through NPM. Do not do both.

Overview

Installation

npm install @patternfly/elements

Usage

Read-only

View HTML Source
<pf-clipboard-copy readonly value="This is read-only"></pf-clipboard-copy>

Expanded

Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.
View HTML Source
<pf-clipboard-copy expandable>
  Got a lot of text here, need to see all of it?
  Click that arrow on the left side and check out the resulting expansion.
</pf-clipboard-copy>

Read-only expanded

Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.
View HTML Source
<pf-clipboard-copy expandable readonly>
  Got a lot of text here, need to see all of it?
  Click that arrow on the left side and check out the resulting expansion.
</pf-clipboard-copy>

Read-only expanded by default

Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.

asodifna osdif

View HTML Source
<pf-clipboard-copy expandable readonly expanded>
  <p>Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.</p>
  <p>asodifna osdif</p>
</pf-clipboard-copy>

JSON object (pre-formatted code)

{ "menu": { "id": "file", "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } }}
View HTML Source
<pf-clipboard-copy code expandable expanded>
  { "menu": {
    "id": "file",
    "value": "File",
    "popup": {
"menuitem": [
  {"value": "New", "onclick": "CreateNewDoc()"},
  {"value": "Open", "onclick": "OpenDoc()"},
  {"value": "Close", "onclick": "CloseDoc()"}
]
    }
  }}
</pf-clipboard-copy>

Inline compact

2.3.4-2-redhat
View HTML Source
<pf-clipboard-copy inline compact>2.3.4-2-redhat</pf-clipboard-copy>

Inline compact code

2.3.4-2-redhat
View HTML Source
<pf-clipboard-copy inline compact code>2.3.4-2-redhat</pf-clipboard-copy>

Inline compact with additional action

2.3.4-2-redhat
View HTML Source
<pf-clipboard-copy inline compact>2.3.4-2-redhat
  <pf-button slot="actions" label="Action" plain variant="primary">
    <pf-icon icon="play"></pf-icon>
  </pf-button>
</pf-clipboard-copy>

Inline compact in sentence

Basic

Lorem ipsum 2.3.4-2-redhat

View HTML Source
<p>Lorem ipsum <pf-clipboard-copy inline compact>2.3.4-2-redhat</pf-clipboard-copy></p>

Long copy string

Lorem ipsum dolor sit amet, consectetur adipiscing elit. https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890 Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, ullamcorper pharetra lacus nibh vitae enim.

View HTML Source
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <pf-clipboard-copy inline compact>https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890</pf-clipboard-copy> 
Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, 
ullamcorper pharetra lacus nibh vitae enim.</p>

Long copy string in block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890 Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, ullamcorper pharetra lacus nibh vitae enim.

View HTML Source
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <pf-clipboard-copy compact block>https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890</pf-clipboard-copy> 
  Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, 
  ullamcorper pharetra lacus nibh vitae enim.
</p>

Slots

Default Slot

Place content to copy here, or use the value attribute

actions

Place additional action buttons here

Attributes

click-tip

Tooltip message to display when clicking the copy button

DOM Property
clickTip
Type
string
Default
'Successfully copied to clipboard!'
hover-tip

Tooltip message to display when hover the copy button

DOM Property
hoverTip
Type
string
Default
'Copy to clipboard'
accessible-text-label

Accessible label to use on the text input.

DOM Property
accessibleTextLabel
Type
string
Default
'Copyable input'
accessible-toggle-label

Accessible label to use on the toggle button.

DOM Property
accessibleToggleLabel
Type
string
Default
'Show content'
entry-delay

Delay in ms before the tooltip appears.

DOM Property
entryDelay
Type
number
Default
300
exit-delay

Delay in ms before the tooltip disappears.

DOM Property
exitDelay
Type
number
Default
1500
block

Flag to determine if inline clipboard copy should be block styling

DOM Property
block
Type
boolean
Default
false
code

Flag to determine if clipboard copy content includes code

DOM Property
code
Type
boolean
Default
false
expanded

Flag to determine if clipboard copy is in the expanded state

DOM Property
expanded
Type
boolean
Default
false
expandable

Implies not inline.

DOM Property
expandable
Type
boolean
Default
false
readonly

Flag to show if the input is read only.

DOM Property
readonly
Type
boolean
Default
false
inline

Implies not expandable. Overrules expandable.

DOM Property
inline
Type
boolean
Default
false
compact

Flag to determine if inline clipboard copy should have compact styling

DOM Property
compact
Type
boolean
Default
false
value

String to copy

DOM Property
value
Type
string
Default
''

Methods

copy()

Copy the current value to the clipboard.

Events

copy

when the text snippet is successfully copied.

Event Type:
PfClipboardCopyCopiedEvent

CSS Custom Properties

CSS Property Description Default
--pf-c-clipboard-copy__toggle-icon--Transition .2s ease-in 0s
--pf-c-clipboard-copy--m-expanded__toggle-icon--Rotate 90deg
--pf-c-clipboard-copy__expandable-content--PaddingTop var(--pf-global--spacer--md, 1rem)
--pf-c-clipboard-copy__expandable-content--PaddingRight var(--pf-global--spacer--md, 1rem)
--pf-c-clipboard-copy__expandable-content--PaddingBottom var(--pf-global--spacer--md, 1rem)
--pf-c-clipboard-copy__expandable-content--PaddingLeft var(--pf-global--spacer--md, 1rem)
--pf-c-clipboard-copy__expandable-content--BackgroundColor var(--pf-global--BackgroundColor--light-100, #fff)
--pf-c-clipboard-copy__expandable-content--BorderTopWidth 0
--pf-c-clipboard-copy__expandable-content--BorderRightWidth var(--pf-global--BorderWidth--sm, 1px)
--pf-c-clipboard-copy__expandable-content--BorderBottomWidth var(--pf-global--BorderWidth--sm, 1px)
--pf-c-clipboard-copy__expandable-content--BorderLeftWidth var(--pf-global--BorderWidth--sm, 1px)
--pf-c-clipboard-copy__expandable-content--BorderColor var(--pf-global--BorderColor--100, #d2d2d2)
--pf-c-clipboard-copy__expandable-content--OutlineOffset calc(-1 * var(--pf-global--spacer--xs, 0.25rem))
--pf-c-clipboard-copy--m-inline--PaddingTop 0
--pf-c-clipboard-copy--m-inline--PaddingBottom 0
--pf-c-clipboard-copy--m-inline--PaddingLeft var(--pf-global--spacer--xs, 0.25rem)
--pf-c-clipboard-copy--m-inline--BackgroundColor var(--pf-global--BackgroundColor--200, #f0f0f0)
--pf-c-clipboard-copy__text--m-code--FontFamily var(--pf-global--FontFamily--monospace, "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace)
--pf-c-clipboard-copy__text--m-code--FontSize var(--pf-global--FontSize--sm, 0.875rem)
--pf-c-clipboard-copy__actions-item--MarginTop calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))
--pf-c-clipboard-copy__actions-item--MarginBottom calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))
--pf-c-clipboard-copy__actions-item--button--PaddingTop var(--pf-global--spacer--xs, 0.25rem)
--pf-c-clipboard-copy__actions-item--button--PaddingRight var(--pf-global--spacer--sm, 0.5rem)
--pf-c-clipboard-copy__actions-item--button--PaddingBottom var(--pf-global--spacer--xs, 0.25rem)
--pf-c-clipboard-copy__actions-item--button--PaddingLeft var(--pf-global--spacer--sm, 0.5rem)

CSS Shadow Parts

None

© 2018-2024 Red Hat, Inc. Deploys by Netlify