A button to copy some text to the system clipboard, made with webcomponents.
npm i -S @substrate-system/copy-buttonSee substrate-system.github.io/copy-button for an example.
This depends on @substrate-system/a11y for a .visually-hidden class. Install and import that module as well.
CSS variables --success-color and --copy-color determine the color of the success checkmark and copy icon.
Include this package, then call customElements.define with your preferred tag name.
import { CopyButton } from '@substrate-system/copy-button'
customElements.define('copy-button', CopyButton)Or call the exported function register to use the default tag name, copy-button.
import { register } from '@substrate-system/copy-button'
register()
// the web component can be used nowCopy files so they are accessible by your web server.
cp ./node_modules/@substrate-system/copy-button/dist/index.min.js public/copy-button.jscp ./node_modules/@substrate-system/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 type="module">
import { CopyButton } from '/copy-button.js'
customElements.define('copy-button', CopyButton)
</script>
</body>We expose several import options
// default, unminified
import '@substrate-system/copy-button'
// minified
import '@substrate-system/copy-button/min'
// style
import '@substrate-system/copy-button/style.css'
// style, minifed
import '@substrate-system/copy-button/min/style.css'In vite, for example, import like this
import '@substrate-system/copy-button'
import '@substrate-system/copy-button/style.css'
// or minified css
import '@substrate-system//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
