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

Clipboard copy

Copied to clipboard

Read only clipboard copy

Copied to clipboard

Expanded clipboard copy

Copied to clipboard

Read only expanded clipboard copy

Copied to clipboard

Read only expanded by default clipboard copy

Copied to clipboard

Expanded clipboard copy with array

Copied to clipboard

JSON object (wrap code with pre)

Copied to clipboard

Props

ClipboardCopy props

The ClipboardCopy component accepts the following props.

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