Skip to content
PatternFly

Clipboard copy

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

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.

Code


{ "menu": {
    "id": "file",
    "value": "File",
    "popup": {
      "menuitem": [
        {"value": "New", "onclick": "CreateNewDoc()"},
        {"value": "Open", "onclick": "OpenDoc()"},
        {"value": "Close", "onclick": "CloseDoc()"}
      ]
    }
  }}

Inline compact

2.3.4-2-redhat

Inline compact code

2.3.4-2-redhat

Inline compact with additional action

2.3.4-2-redhat

Inline compact in sentence

Basic

Lorem ipsum 
2.3.4-2-redhat
 dolor sit amet.

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.

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.

Documentation

Accessibility

Attribute
Applied to
Outcome
aria-label="Copy to clipboard", aria-label="Show content"
.pf-v5-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-v5-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-v5-c-button.pf-m-control
Identifies the element controlled by the toggle button. Required
hidden
.pf-v5-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-v5-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-v5-c-clipboard-copy
<div>
Initiates a clipboard copy component. Required
.pf-v5-c-clipboard-copy__group
<div>
Initiates a wrapper for the clipboard copy group. Required
.pf-v5-c-clipboard-copy__toggle-icon
<div>
Initiates a toggle button icon.
.pf-v5-c-clipboard-copy__expandable-content
<div>
Initiates an expandable element.
.pf-v5-c-clipboard-copy__text
<span>
Initiates the inline copy clipboard text element. Required
.pf-v5-c-clipboard-copy__actions
<span>
Initiates the inline copy clipboard actions element. Required
.pf-v5-c-clipboard-copy__actions-item
<span>
Initiates the inline copy clipboard actions item element. Required
.pf-m-inline
.pf-v5-c-clipboard-copy
Modifies the clipboard copy component for inline styles.
.pf-m-block
.pf-v5-c-clipboard-copy.pf-m-inline
Modifies the inline copy clipboard component to have block formatting.
.pf-m-expanded
.pf-v5-c-clipboard-copy
Modifies the clipboard copy component for the expanded state.
.pf-m-expanded
.pf-v5-c-button.pf-m-control
Modifies the control toggle button for the expanded state.
.pf-m-code
code.pf-v5-c-clipboard-copy__text
Modifies the inline copy clipboard text styles for use with the <code> element.

CSS variables

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

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines