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 VariablesExamples
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | Additional classes added to the clipboard copy container. | |
| hoverTip | string | No | 'Copy to clipboard' | Tooltip message to display when hover the copy button |
| clickTip | string | No | 'Successfully copied to clipboard!' | Tooltip message to display when clicking the copy button |
| textAriaLabel | string | No | 'Copyable input' | Aria-label to use on the TextInput. |
| toggleAriaLabel | string | No | 'Show content' | Aria-label to use on the ClipboardCopyToggle. |
| isReadOnly | boolean | No | false | Flag to show if the input is read only. |
| isExpanded | boolean | No | false | Flag to determine if clipboard copy is in the expanded state initially |
| isCode | boolean | No | false | Flag to determine if clipboard copy content includes code |
| variant | typeof ClipboardCopyVariant | 'inline' | 'expansion' | No | 'inline' | Adds Clipboard Copy variant styles. |
| position | PopoverPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right' | No | TooltipPosition.top | Copy button popover position. |
| maxWidth | string | No | '150px' | Maximum width of the tooltip (default 150px). |
| exitDelay | number | No | 1600 | Delay in ms before the tooltip disappears. |
| entryDelay | number | No | 100 | Delay in ms before the tooltip appears. |
| switchDelay | number | No | 2000 | Delay in ms before the tooltip message switch to hover tip. |
| onCopy | (event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => void | No | (event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => { const clipboard = event.currentTarget.parentElement; const el = document.createElement('input'); 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. |
| onChange | (text?: string | number) => void | No | (): any => undefined | A function that is triggered on changing the text. |
| children | React.ReactNode | Yes | The text which is copied. |
