React

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
classNamestringAdditional classes added to the clipboard copy container.
hoverTipstring'Copy to clipboard'Tooltip message to display when hover the copy button
clickTipstring'Successfully copied to clipboard!'Tooltip message to display when clicking the copy button
textAriaLabelstring'Copyable input'Custom flag to show that the input requires an associated id or aria-label.
toggleAriaLabelstring'Show content'Custom flag to show that the toggle button requires an associated id or aria-label.
isReadOnlybooleanfalseFlag to show if the input is read only.
isExpandedbooleanfalseFlag to determine if clipboard copy is in the expanded state initially
isCodebooleanfalseFlag to determine if clipboard copy content includes code
varianttypeof ClipboardCopyVariant | 'inline' | 'expansion''inline'Adds Clipboard Copy variant styles.
positionOneOf<typeof PopoverPosition, keyof typeof PopoverPosition>TooltipPosition.topCopy button popover position.
maxWidthstring'150px'Maximum width of the tooltip (default 150px).
exitDelaynumber1600Delay in ms before the tooltip disappears.
entryDelaynumber100Delay in ms before the tooltip appears.
switchDelaynumber2000Delay in ms before the tooltip message switch to hover tip.
onCopy(event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => void(event: any, text: string) => { const clipboard = event.currentTarget.parentElement; const el = document.createElement('input'); el.value = text; 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) => void(): any => undefinedA function that is triggered on changing the text.
childrenReact.ReactNodeThe text which is copied.

CSS Variables