2.23.0Copy to Clipboard Component in Bolt
Copy to Clipboard allows the user to copy the current page URL to clipbaord to paste and share.
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 |
— |
|