Patternfly Logo

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
childrenReact.ReactNodeYesThe text which is copied.
classNamestringNoAdditional classes added to the clipboard copy container.
clickTipstringNo'Successfully copied to clipboard!'Tooltip message to display when clicking the copy button
entryDelaynumberNo100Delay in ms before the tooltip appears.
exitDelaynumberNo1600Delay in ms before the tooltip disappears.
hoverTipstringNo'Copy to clipboard'Tooltip message to display when hover the copy button
isCodebooleanNofalseFlag to determine if clipboard copy content includes code
isExpandedbooleanNofalseFlag to determine if clipboard copy is in the expanded state initially
isReadOnlybooleanNofalseFlag to show if the input is read only.
maxWidthstringNo'150px'Maximum width of the tooltip (default 150px).
onChange(text?: string | number) => voidNo(): any => undefinedA function that is triggered on changing the text.
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('textarea'); 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.
positionPopoverPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right'NoTooltipPosition.topCopy button popover position.
switchDelaynumberNo2000Delay in ms before the tooltip message switch to hover tip.
textAriaLabelstringNo'Copyable input'Aria-label to use on the TextInput.
toggleAriaLabelstringNo'Show content'Aria-label to use on the ClipboardCopyToggle.
varianttypeof ClipboardCopyVariant | 'inline' | 'expansion'No'inline'Adds Clipboard Copy variant styles.

CSS variables


View source on GitHub