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.

Documentation

Accessibility

AttributeApplied toOutcome
aria-label="Copy to clipboard", aria-label="Show content".pf-c-button.pf-m-controlProvides 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-controlProvides 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-controlIdentifies the element controlled by the toggle button. Required
hidden.pf-c-clipboard-copy__expandable-contentIndicates 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-controlProvides 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

ClassApplied toOutcome
.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-m-expanded.pf-c-clipboard-copyModifies the clipboard copy component for the expanded state.
.pf-m-expanded.pf-c-button.pf-m-controlModifies the control toggle button for the expanded state.

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)

View source on Github