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 | string | 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 | 1500 | 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 | (event: React.FormEvent, text?: string) => 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) => { try { navigator.clipboard.writeText(text.toString()); } catch (error) { // eslint-disable-next-line no-console console.warn( "Clipboard API not found, this copy function will not work. This is likely because you're using an", "unsupported browser or you're not using HTTPS. \n\nIf you're a developer building an application which needs", "to support copying to the clipboard without the clipboard API, you'll have to create your own copy", 'function and pass it to the ClipboardCopy component as the onCopy prop. For more information see', 'https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard' ); // eslint-disable-next-line no-console console.error(error); } } | A function that is triggered on clicking the copy button. This will replace the existing clipboard copy functionality entirely. |
| ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
| ouiaSafe | boolean | true | Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. |
| position | | TooltipPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' | TooltipPosition.top | Copy button tooltip position. |
| 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 |
| onTooltipHidden | () => void | () => {} | Callback when tooltip's hide transition has finished executing |
| position | | TooltipPosition | '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
| Expand or collapse column | Selector | Variable | Value |
|---|
