Skip to content
Patternfly Logo

Clipboard copy

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)

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.

Props

ClipboardCopy

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeThe text which is copied.
additionalActionsReact.ReactNodenullAdditional actions for inline clipboard copy. Should be wrapped with ClipboardCopyAction.
classNamestringAdditional classes added to the clipboard copy container.
clickTipstring'Successfully copied to clipboard!'Tooltip message to display when clicking the copy button
entryDelaynumber300Delay in ms before the tooltip appears.
exitDelaynumber1600Delay in ms before the tooltip disappears.
hoverTipstring'Copy to clipboard'Tooltip message to display when hover the copy button
isBlockbooleanFlag to determine if inline clipboard copy should be block styling
isCodebooleanfalseFlag to determine if clipboard copy content includes code
isExpandedbooleanfalseFlag to determine if clipboard copy is in the expanded state initially
isReadOnlybooleanfalseFlag to show if the input is read only.
maxWidthstring'150px'Maximum width of the tooltip (default 150px).
onChange(text?: string | number) => void(): any => undefinedA function that is triggered on changing the text.
onCopy(event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => void(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'TooltipPosition.topCopy button popover position.
switchDelaynumber2000Delay in ms before the tooltip message switch to hover tip.
textAriaLabelstring'Copyable input'Aria-label to use on the TextInput.
toggleAriaLabelstring'Show content'Aria-label to use on the ClipboardCopyToggle.
varianttypeof ClipboardCopyVariant | 'inline' | 'expansion' | 'inline-compact''inline'Adds Clipboard Copy variant styles.

ClipboardCopyButton

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeContent of the copy button
idrequiredstringID of the copy button
onClickrequired(event: React.MouseEvent) => voidCallback for the copy when the button is clicked
textIdrequiredstringID of the content that is being copied
aria-labelstring'Copyable input'Aria-label for the copy button
classNamestringAdditional classes added to the copy button
entryDelaynumber300Entry delay on the copy button tooltip
exitDelaynumber0Exit delay on the copy button tooltip
maxWidthstring'100px'Max width of the copy button tooltip
position'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end''top'Position of the copy button tooltip
variant'control' | 'plain''control'Variant of the copy button

CSS variables


View source on GitHub