Clipboard copy

The clipboard copy component allows users to quickly and easily copy content to their clipboard.

Examples

Basic

Read Only

Expanded

Read only expanded

Read only expanded by default

Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.

Expanded with array

JSON object (wrap code with pre)

Inline compact

2.3.4-2-redhat

Inline compact code

2.3.4-2-redhat

Inline compact with additional action

2.3.4-2-redhat

Inline compact in sentence

Basic
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

*required
Name	Type	Default	Description
childrenrequired	React.ReactNode		The text which is copied.
additionalActions	React.ReactNode	null	Additional actions for inline-compact 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

*required
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

View source on GitHub