@bicycle-codes/copy-button
Advanced tools
A button to copy some text to the system clipboard, made with webcomponents, with no dependencies.
npm i -S @bicycle-codes/copy-button
See bicycle-codes.github.io/copy-button for an example.
This looks at css variables --success-color and --copy-color which determines the color of the success checkmark and copy icon.
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/index.min.js public/copy-button.js
cp ./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'
// 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
FAQs
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ENISA’s 2025 Threat Landscape report highlights how AI is reshaping cyber attacks, driving phishing, model poisoning, and software supply chain risks.
Security News
Evan You announces Vite+, a commercial, Rust-powered toolchain built on the Vite ecosystem to unify JavaScript development and fund open source.
Security News
Ruby Central’s incident report on the RubyGems.org access dispute sparks backlash from former maintainers and renewed debate over project governance.