Copy to clipboard

Preview

Basic

Inline

i-0123456789abcdef0

Copy S3 URI

Usage

<cs-copy-to-clipboard
  text-to-copy="Hello, world!"
  copy-button-text="Copy"
></cs-copy-to-clipboard>

Properties

copy-button-aria-labelstring

Adds aria-label to the copy button. Use this to provide an accessible name for buttons that don't have visible text, and to distinguish between multiple buttons with identical visible text. The text will also be added to the title attribute of the button.

copy-button-textstring default: 'Copy'

The text of the copy button (for variant="button").

copy-error-textstringrequired

The message shown when the text is not copied due to an error, see https://w3c.github.io/clipboard-apis/#dom-clipboard-writetext.

copy-success-textstringrequired

The message shown when the text is copied successfully.

disabledboolean default: false

Renders the copy to clipboard button as disabled and prevents clicks.

disabled-reasonstring

Provides a reason why the copy to clipboard button is disabled (only when disabled is true). If provided, the copy to clipboard button becomes focusable. Applicable for all variants except inline.

popover-render-with-portalboolean

By default, the popover is constrained to fit inside its parent stacking context. Enabling this property will allow the popover to be rendered in the root stack context using React Portals. Enable this setting if you need the popover to ignore its parent stacking context.

text-to-copystringrequired

The text content to be copied. It is displayed next to the copy button when variant="inline" unless when content is specified, and is not shown otherwise.

text-to-displaystring

The text content to display next to the copy button when variant="inline". If not provided, textToCopy will be displayed instead.

variantCopyToClipboardProps.Variant default: 'button'

Determines the general styling of the copy button as follows:

button to display a standalone secondary button with an icon, and copyButtonText as text.
icon to display a standalone icon-only (no text) button.
inline to display an icon-only (no text) button within a text context.

Defaults to button.

Events

copyFailureCustomEvent<CopyToClipboardProps.CopyFailureDetail>: Called when the copy operation fails. The event detail contains the text that failed to copy.
copySuccessCustomEvent<CopyToClipboardProps.CopySuccessDetail>: Called when the text is successfully copied to the clipboard. The event detail contains the text that was copied.