Skip to content
Patternfly Logo

Clipboard copy

Examples

Basic


Expandable

Editable


This is an editable version of the Copy to Clipboard Component that has an expandable section. 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.

Read-only


This is an editable version of the Copy to Clipboard Component that has an expandable section. 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.

Inline

Basic

2.3.4-2-redhat


Code variant

2.3.4-2-redhat


Additional action

2.3.4-2-redhat


In a sentence

Lorem ipsum 
2.3.4-2-redhat
 dolor sit amet.

Long string that wraps

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.

Block variant

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.

Documentation

Accessibility

Attribute
Applied to
Outcome
aria-label="Copy to clipboard", aria-label="Show content"
.pf-c-button.pf-m-control
Provides an accessible name for the button when an icon is used instead of text. Required when an icon is used with no supporting text.
aria-label="[input label text]"
.pf-c-form-control
Provides an accessible label for the input. Provide a label that describes the contents in the input. Required
aria-hidden="true"
<i>
Hides the icon from assistive technologies.
aria-controls="[id of expandable element]"
.pf-c-button.pf-m-control
Identifies the element controlled by the toggle button. Required
hidden
.pf-c-clipboard-copy__expandable-content
Indicates that the expandable content is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies.
aria-labelledby="[id of button] [id of input label]"
.pf-c-button.pf-m-control
Provides an accessible name that is unique and communicates context of the button. Required when more than one ClipboardCopy component exists on the page. Important: If the label is defined on the <input> using aria-label, then use the id of the <input>. If the label is defined in a <label>, then use the id of the <label>. Alternatively this attribute can be ignored if the text input label is defined as part of the value in aria-label.

Usage

Class
Applied to
Outcome
.pf-c-clipboard-copy
<div>
Initiates a clipboard copy component. Required
.pf-c-clipboard-copy__group
<div>
Initiates a wrapper for the clipboard copy group. Required
.pf-c-clipboard-copy__toggle-icon
<div>
Initiates a toggle button icon.
.pf-c-clipboard-copy__expandable-content
<div>
Initiates an expandable element.
.pf-c-clipboard-copy__text
<span>
Initiates the inline copy clipboard text element. Required
.pf-c-clipboard-copy__actions
<span>
Initiates the inline copy clipboard actions element. Required
.pf-c-clipboard-copy__actions-item
<span>
Initiates the inline copy clipboard actions item element. Required
.pf-m-inline
.pf-c-clipboard-copy
Modifies the clipboard copy component for inline styles.
.pf-m-block
.pf-c-clipboard-copy.pf-m-inline
Modifies the inline copy clipboard component to have block formatting.
.pf-m-expanded
.pf-c-clipboard-copy
Modifies the clipboard copy component for the expanded state.
.pf-m-expanded
.pf-c-button.pf-m-control
Modifies the control toggle button for the expanded state.
.pf-m-code
code.pf-c-clipboard-copy__text
Modifies the inline copy clipboard text styles for use with the <code> element.

CSS variables

.pf-c-clipboard-copy--pf-c-clipboard-copy__toggle-icon--Transition
.2s ease-in 0s
.pf-c-clipboard-copy--pf-c-clipboard-copy--m-expanded__toggle-icon--Rotate
90deg
.pf-c-clipboard-copy--pf-c-clipboard-copy__expandable-content--PaddingTop
1rem
.pf-c-clipboard-copy--pf-c-clipboard-copy__expandable-content--PaddingRight
1rem
.pf-c-clipboard-copy--pf-c-clipboard-copy__expandable-content--PaddingBottom
1rem
.pf-c-clipboard-copy--pf-c-clipboard-copy__expandable-content--PaddingLeft
1rem
.pf-c-clipboard-copy--pf-c-clipboard-copy__expandable-content--BackgroundColor
#fff
.pf-c-clipboard-copy--pf-c-clipboard-copy__expandable-content--BorderTopWidth
0
.pf-c-clipboard-copy--pf-c-clipboard-copy__expandable-content--BorderRightWidth
1px
.pf-c-clipboard-copy--pf-c-clipboard-copy__expandable-content--BorderBottomWidth
1px
.pf-c-clipboard-copy--pf-c-clipboard-copy__expandable-content--BorderLeftWidth
1px
.pf-c-clipboard-copy--pf-c-clipboard-copy__expandable-content--BorderColor
#d2d2d2
.pf-c-clipboard-copy--pf-c-clipboard-copy__expandable-content--OutlineOffset
calc(-1 * 0.25rem)
.pf-c-clipboard-copy--pf-c-clipboard-copy--m-inline--PaddingTop
0.25rem
.pf-c-clipboard-copy--pf-c-clipboard-copy--m-inline--PaddingBottom
0.3125rem
.pf-c-clipboard-copy--pf-c-clipboard-copy--m-inline--PaddingLeft
0.25rem
.pf-c-clipboard-copy--pf-c-clipboard-copy--m-inline--BackgroundColor
#f0f0f0
.pf-c-clipboard-copy--pf-c-clipboard-copy__text--m-code--FontFamily
'"Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace'
.pf-c-clipboard-copy--pf-c-clipboard-copy__text--m-code--FontSize
0.875rem
.pf-c-clipboard-copy--pf-c-clipboard-copy__actions-item--MarginTop
calc(-1 * 0.375rem)
.pf-c-clipboard-copy--pf-c-clipboard-copy__actions-item--MarginBottom
calc(-1 * 0.375rem)
.pf-c-clipboard-copy--pf-c-clipboard-copy__actions-item--button--PaddingTop
0.25rem
.pf-c-clipboard-copy--pf-c-clipboard-copy__actions-item--button--PaddingRight
0.5rem
.pf-c-clipboard-copy--pf-c-clipboard-copy__actions-item--button--PaddingBottom
0.25rem
.pf-c-clipboard-copy--pf-c-clipboard-copy__actions-item--button--PaddingLeft
0.5rem
.pf-c-clipboard-copy__actions-item .pf-c-button--pf-c-button--PaddingTop
0.25rem
.pf-c-clipboard-copy__actions-item .pf-c-button--pf-c-button--PaddingRight
0.5rem
.pf-c-clipboard-copy__actions-item .pf-c-button--pf-c-button--PaddingBottom
0.25rem
.pf-c-clipboard-copy__actions-item .pf-c-button--pf-c-button--PaddingLeft
0.5rem

View source on GitHub