Skip to Content
Patternfly Logo

Clipboard copy

The clipboard copy component is used when you want to copy a line or a block of text to the clipboard to paste it into another location. This is useful for copying system generated key values, for example, to both reduce user effort and the occurrence of entry errors.

ExamplesPropsCSS Variables

Examples

Basic

Read Only

Expanded

Read only expanded

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.

Expanded with array

JSON object (wrap code with pre)

Props

ClipboardCopy properties
NameTypeRequiredDefaultDescription
classNamestringNoAdditional classes added to the clipboard copy container.
hoverTipstringNo'Copy to clipboard'Tooltip message to display when hover the copy button
clickTipstringNo'Successfully copied to clipboard!'Tooltip message to display when clicking the copy button
textAriaLabelstringNo'Copyable input'Custom flag to show that the input requires an associated id or aria-label.
toggleAriaLabelstringNo'Show content'Custom flag to show that the toggle button requires an associated id or aria-label.
isReadOnlybooleanNofalseFlag to show if the input is read only.
isExpandedbooleanNofalseFlag to determine if clipboard copy is in the expanded state initially
isCodebooleanNofalseFlag to determine if clipboard copy content includes code
varianttypeof ClipboardCopyVariant | 'inline' | 'expansion'No'inline'Adds Clipboard Copy variant styles.
positionPopoverPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right'NoTooltipPosition.topCopy button popover position.
maxWidthstringNo'150px'Maximum width of the tooltip (default 150px).
exitDelaynumberNo1600Delay in ms before the tooltip disappears.
entryDelaynumberNo100Delay in ms before the tooltip appears.
switchDelaynumberNo2000Delay in ms before the tooltip message switch to hover tip.
onCopy(event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => voidNo(event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => { const clipboard = event.currentTarget.parentElement; const el = document.createElement('input'); el.value = text.toString(); clipboard.appendChild(el); el.select(); document.execCommand('copy'); clipboard.removeChild(el); }A function that is triggered on clicking the copy button.
onChange(text?: string | number) => voidNo(): any => undefinedA function that is triggered on changing the text.
childrenReact.ReactNodeYesThe text which is copied.

CSS Variables