Examples
Inline compact in sentence
Basic
Lorem ipsum
Long copy string
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Long copy string in block
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
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
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | The text which is copied. | |
| additionalActions | React.ReactNode | null | Additional actions for inline clipboard copy. Should be wrapped with ClipboardCopyAction. |
| className | string | Additional classes added to the clipboard copy container. | |
| clickTip | string | 'Successfully copied to clipboard!' | Tooltip message to display when clicking the copy button |
| entryDelay | number | 300 | Delay in ms before the tooltip appears. |
| exitDelay | number | 1600 | Delay in ms before the tooltip disappears. |
| hoverTip | string | 'Copy to clipboard' | Tooltip message to display when hover the copy button |
| isBlock | boolean | Flag to determine if inline clipboard copy should be block styling | |
| isCode | boolean | false | Flag to determine if clipboard copy content includes code |
| isExpanded | boolean | false | Flag to determine if clipboard copy is in the expanded state initially |
| isReadOnly | boolean | false | Flag to show if the input is read only. |
| maxWidth | string | '150px' | Maximum width of the tooltip (default 150px). |
| onChange | (text?: string | number) => void | (): any => undefined | A 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. |
| position | PopoverPosition | TooltipPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' | PopoverPosition.top | Copy button popover position. |
| switchDelay | number | 2000 | Delay in ms before the tooltip message switch to hover tip. |
| textAriaLabel | string | 'Copyable input' | Aria-label to use on the TextInput. |
| toggleAriaLabel | string | 'Show content' | Aria-label to use on the ClipboardCopyToggle. |
| variant | typeof ClipboardCopyVariant | 'inline' | 'expansion' | 'inline-compact' | 'inline' | Adds Clipboard Copy variant styles. |
ClipboardCopyButton
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | Content of the copy button | |
| idrequired | string | ID of the copy button | |
| onClickrequired | (event: React.MouseEvent) => void | Callback for the copy when the button is clicked | |
| textIdrequired | string | ID of the content that is being copied | |
| aria-label | string | 'Copyable input' | Aria-label for the copy button |
| className | string | Additional classes added to the copy button | |
| entryDelay | number | 300 | Entry delay on the copy button tooltip |
| exitDelay | number | 0 | Exit delay on the copy button tooltip |
| maxWidth | string | '100px' | Max width of the copy button tooltip |
| position | TooltipPosition | PopoverPosition | '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
