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/elementsThen 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/elementsUsage
Read-only
View HTML Source
<pf-clipboard-copy readonly value="This is read-only"></pf-clipboard-copy>
Expanded
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
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)
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
View HTML Source
<pf-clipboard-copy inline compact>2.3.4-2-redhat</pf-clipboard-copy>
Inline compact code
View HTML Source
<pf-clipboard-copy inline compact code>2.3.4-2-redhat</pf-clipboard-copy>
Inline compact with additional action
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
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.
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.
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
-
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 |
Transition for the toggle icon |
.2s ease-in 0s
|
--pf-c-clipboard-copy--m-expanded__toggle-icon--Rotate |
Rotate value for the toggle icon when expanded |
90deg
|
--pf-global--LineHeight--md |
1.5
|
|
--pf-global--BorderColor--300 |
#f0f0f0
|
|
--pf-global--BackgroundColor--100 |
#fff
|
|
--pf-global--spacer--md |
1rem
|
|
--pf-global--BackgroundColor--light-100 |
#fff
|
|
--pf-global--BorderWidth--sm |
1px
|
|
--pf-global--BorderColor--100 |
#d2d2d2
|
|
--pf-c-clipboard-copy__expandable-content--OutlineOffset |
OutlineOffset for the expandable content |
calc(-1 * var(--pf-global--spacer--xs, 0.25rem))
|
--pf-c-form-control--focus--BorderBottomWidth |
—
|
|
--pf-global--primary-color--100 |
#06c
|
|
--pf-c-clipboard-copy__text--m-code--FontFamily |
FontFamily for the code text |
var(--pf-global--FontFamily--monospace, "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace)
|
--pf-global--Color--dark-200 |
#6a6e73
|
|
--pf-global--Color--100 |
#151515
|
|
--pf-global--disabled-color--100 |
#6a6e73
|
|
--pf-c-clipboard-copy__text--m-code--FontSize |
FontSize for the code text |
var(--pf-global--FontSize--sm, 0.875rem)
|
--pf-global--FontSize--sm |
0.875rem
|
|
--pf-c-clipboard-copy__actions-item--MarginTop |
MarginTop for actions item |
calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))
|
--pf-global--disabled-color--300 |
#f0f0f0
|
|
--pf-c-clipboard-copy__actions-item--MarginBottom |
MarginBottom for actions item |
calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))
|
--pf-global--spacer--form-element |
0.375rem
|
|
--pf-global--BorderColor--200 |
#8a8d90
|
|
--pf-global--spacer--xs |
0.25rem
|
|
--pf-global--spacer--sm |
0.5rem
|
|
--pf-global--FontSize--md |
1rem
|
|
--pf-c-form-control--success--BorderBottomWidth |
—
|
|
--pf-global--success-color--100 |
#3e8635
|
|
--pf-c-form-control--Color |
—
|
|
--pf-c-form-control--Width |
—
|
|
--pf-c-form-control--PaddingTop |
—
|
|
--pf-c-form-control--PaddingRight |
—
|
|
--pf-c-form-control--PaddingBottom |
—
|
|
--pf-c-form-control--success--BackgroundPositionX |
—
|
|
--pf-c-form-control--PaddingLeft |
—
|
|
--pf-c-form-control--success--BackgroundPositionY |
—
|
|
--pf-c-form-control--FontSize |
—
|
|
--pf-c-form-control--LineHeight |
—
|
|
--pf-c-form-control--BackgroundColor |
—
|
|
--pf-c-form-control--BorderWidth |
—
|
|
--pf-c-form-control--success--BackgroundSizeX |
—
|
|
--pf-c-form-control--BorderTopColor |
—
|
|
--pf-c-form-control--BorderRightColor |
—
|
|
--pf-c-form-control--success--BackgroundSizeY |
—
|
|
--pf-c-form-control--BorderBottomColor |
—
|
|
--pf-c-form-control--BorderLeftColor |
—
|
|
--pf-c-form-control--BorderRadius |
—
|
|
--pf-c-form-control--Height |
—
|
|
--pf-c-form-control--readonly--BackgroundColor |
—
|
|
--pf-c-clipboard-copy__expandable-content--PaddingTop |
PaddingTop for the expandable content |
var(--pf-global--spacer--md, 1rem)
|
--pf-c-clipboard-copy__expandable-content--PaddingRight |
PaddingRight for the expandable content |
var(--pf-global--spacer--md, 1rem)
|
--pf-c-clipboard-copy__expandable-content--PaddingBottom |
PaddingBottom for the expandable content |
var(--pf-global--spacer--md, 1rem)
|
--pf-c-clipboard-copy__expandable-content--PaddingLeft |
PaddingLeft for the expandable content |
var(--pf-global--spacer--md, 1rem)
|
--pf-c-clipboard-copy__expandable-content--BackgroundColor |
BackgroundColor for the expandable content |
var(--pf-global--BackgroundColor--light-100, #fff)
|
--pf-c-form-control--m-warning--BorderBottomWidth |
—
|
|
--pf-c-clipboard-copy__expandable-content--BorderColor |
BorderColor for the expandable content |
var(--pf-global--BorderColor--100, #d2d2d2)
|
--pf-global--warning-color--100 |
#f0ab00
|
|
--pf-c-clipboard-copy__expandable-content--BorderTopWidth |
BorderTopWidth for the expandable content |
0
|
--pf-c-clipboard-copy__expandable-content--BorderRightWidth |
BorderRightWidth for the expandable content |
var(--pf-global--BorderWidth--sm, 1px)
|
--pf-c-clipboard-copy__expandable-content--BorderBottomWidth |
BorderBottomWidth for the expandable content |
var(--pf-global--BorderWidth--sm, 1px)
|
--pf-c-clipboard-copy__expandable-content--BorderLeftWidth |
BorderLeftWidth for the expandable content |
var(--pf-global--BorderWidth--sm, 1px)
|
--pf-c-clipboard-copy__expandable-content--BoxShadow |
—
|
|
--pf-c-form-control--m-warning--BackgroundPositionX |
—
|
|
--pf-c-form-control--m-warning--BackgroundPositionY |
—
|
|
--pf-global--FontFamily--monospace |
var(--pf-global--FontFamily--redhat--monospace,
"RedHatMono",
"Liberation Mono",
consolas,
"SFMono-Regular",
menlo,
monaco,
"Courier New",
monospace)
|
|
--pf-global--FontFamily--redhat--monospace |
"RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace
|
|
--pf-c-form-control--m-warning--BackgroundSizeX |
—
|
|
--pf-c-form-control--m-warning--BackgroundSizeY |
—
|
|
--pf-c-clipboard-copy--m-inline--PaddingTop |
PaddingTop for the inline variant |
0
|
--pf-c-clipboard-copy--m-inline--PaddingBottom |
PaddingBottom for the inline variant |
0
|
--pf-c-clipboard-copy--m-inline--PaddingLeft |
PaddingLeft for the inline variant |
var(--pf-global--spacer--xs, 0.25rem)
|
--pf-c-button--m-plain--BackgroundColor |
var(--pf-global--BackgroundColor--200, #f0f0f0)
|
|
--pf-global--BackgroundColor--200 |
#f0f0f0
|
|
--pf-global--BorderWidth--md |
2px
|
|
--pf-c-clipboard-copy--m-inline--BackgroundColor |
BackgroundColor for the inline variant |
var(--pf-global--BackgroundColor--200, #f0f0f0)
|
--pf-c-form-control--invalid--BorderBottomWidth |
—
|
|
--pf-global--danger-color--100 |
#c9190b
|
|
--pf-c-clipboard-copy__actions-item--button--PaddingTop |
PaddingTop for actions item button |
var(--pf-global--spacer--xs, 0.25rem)
|
--pf-c-clipboard-copy__actions-item--button--PaddingRight |
PaddingRight for actions item button |
var(--pf-global--spacer--sm, 0.5rem)
|
--pf-c-clipboard-copy__actions-item--button--PaddingBottom |
PaddingBottom for actions item button |
var(--pf-global--spacer--xs, 0.25rem)
|
--pf-c-clipboard-copy__actions-item--button--PaddingLeft |
PaddingLeft for actions item button |
var(--pf-global--spacer--sm, 0.5rem)
|
--pf-c-form-control--invalid--BackgroundPositionX |
—
|
|
--pf-c-form-control--invalid--BackgroundPositionY |
—
|
|
--pf-c-button--PaddingTop |
—
|
|
--pf-c-button--PaddingBottom |
—
|
|
--pf-c-form-control--invalid--BackgroundSizeY |
—
|
|
--pf-c-form-control--invalid--exclamation--Background |
—
|
|
--pf-global--spacer--xl |
2rem
|
|
--pf-c-form-control--inset--base |
—
|
|
--pf-c-form-control--m-icon--BackgroundPositionX |
—
|
|
--pf-c-form-control--m-icon--icon--spacer |
—
|
|
--pf-c-form-control--invalid--BackgroundSizeX |
—
|
|
--pf-c-form-control--invalid--BackgroundUrl |
—
|
|
--pf-c-form-control--invalid--BackgroundPosition |
—
|
|
--pf-c-form-control--invalid--BackgroundSize |
—
|
|
--pf-c-form-control--success--BackgroundUrl |
—
|
|
--pf-c-form-control--success--BackgroundPosition |
—
|
|
--pf-c-form-control--success--BackgroundSize |
—
|
|
--pf-c-form-control--m-warning--BackgroundUrl |
—
|
|
--pf-c-form-control--m-icon--BackgroundUrl |
—
|
|
--pf-c-form-control--m-warning--BackgroundPosition |
—
|
|
--pf-c-form-control--m-icon--icon--BackgroundPositionX |
—
|
|
--pf-c-form-control--m-icon--BackgroundPositionY |
—
|
|
--pf-c-form-control--m-warning--BackgroundSize |
—
|
|
--pf-c-form-control--m-icon--BackgroundSizeX |
—
|
|
--pf-c-form-control--m-icon--BackgroundSizeY |
—
|
|
--pf-c-form-control__select--BackgroundPositionY |
—
|
|
--pf-global--spacer--3xl |
4rem
|
|
--pf-c-form-control__select--BackgroundPositionX |
—
|
|
--pf-global--spacer--lg |
1.5rem
|
CSS Shadow Parts
None
