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

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.
isReadOnlyboolfalseFlag to show if the input is read only.
variantenum'inline'Adds Clipboard Copy variant styles.
positionenumTooltipPosition.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.
onCopyfunc(event, text) => { 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.
onChangefunc() => {}A function that is triggered on changing the text.
childrennodeThe text which is copied.
anyAdditional props are spread to the container <div>.

CSS Variables