copy to clipboard docs

2.11.2

Copy to Clipboard

Copy to Clipboard Component in Bolt

Copy to Clipboard allows the user to copy the current page URL to clipbaord to paste and share.

Install via NPM
npm install @bolt/components-copy-to-clipboard
  {% include "@bolt-components-copy-to-clipboard/copy-to-clipboard.twig" with {
  text_to_copy: "https://boltdesignsystem.com"
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
Attributes

A Drupal-style attributes object with extra attributes to append to this component.

object
Text

This property has been renamed trigger_text

string Copy Link
CopiedText

Use the custom_confirmation property instead if you need to change the confirmation text.

string Copied!
IconSize

Use custom_trigger, custom_transition, and custom_confirmation properties if you need to change icon size.

string medium
Url

This property has been renamed text_to_copy

string
Trigger_text

Text to use for the inital copy button. Ignored if the custom_trigger property is used.

string Copy Link
Text_to_copy *

The text to copy to the clipboard.

string
Custom_trigger

(optional) Custom content to show for the initial copy trigger. If you pass a link, set the URL to '#!' since it should not being followed.

string , object , array
Custom_transition

(optional) Custom content to show while copy is in progress. This content will be rotated while the copying happens, so it's recommended to pass an icon.

string , object , array
Custom_confirmation

(optional) Custom content to show after a successful copy.

string , object , array

copy to clipboard

Copied!
Copied!
Copied!
Copied!
Custom transition
Copied!
Copied!
Custom transition

Custom confirmation