2.6.0-beta.1

Copy to Clipboard

Copy to Clipboard Component in Bolt

Published

History
View changes
Install
yarn add @bolt/components-copy-to-clipboard
Source code
View on Github
Dependencies

Overview

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

Usage

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

Schema

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 or object or 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 or object or array —
  • —
custom_confirmation

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

 string or object or array —
  • —