A button to copy some text to the system clipboard, made with webcomponents, with no dependencies.
npm i -S @bicycle-codes/copy-buttonSee bicycle-codes.github.io/copy-button for an example.
This looks at css variables --success-color and --copy-color which determines the color the checkmark that is displayed after you copy something.
Include this package, then use the tag <copy-button> in HTML.
Copy files so they are accessible by your web server.
cp ./node_modules/@bicycle-codes/copy-button/dist/bundle.min.js public/copy-button.jscp ./node_modules/@bicycle-codes/copy-button/dist/style.min.css public/copy-button.css<head>
<!-- style -->
<link rel="stylesheet" href="./copy-button.css">
</head>
<body>
<!-- use the tag -->
<copy-button payload="example text"></copy-button>
<!-- include the script -->
<script src="/copy-button.js" type="module"></script>
</body>We expose several import options
// default, unminified
import '@bicycle-codes/copy-button'
// bundled
import '@bicycle-codes/copy-button/bundle'
// bundled + minified
import '@bicycle-codes/copy-button/min'
// style
import '@bicycle-codes/copy-button/style.css'
// style, minifed
import '@bicycle-codes/copy-button/min/style.css'In vite, for example, import like this
import '@bicycle-codes/copy-button'
import '@bicycle-codes/copy-button/style.css'
// or minified css
import '@bicycle-codes//copy-button/min/style.css'Override the variables --success-color and --copy-color to customize the color.
.copy-button {
--success-color: green;
--copy-color: blue;
}Create a button like this
