https://github.com/substrate-system/copy-button
Web component button to copy something
https://github.com/substrate-system/copy-button
button component copy web webcomponent
Last synced: about 1 year ago
JSON representation
Web component button to copy something
- Host: GitHub
- URL: https://github.com/substrate-system/copy-button
- Owner: substrate-system
- License: other
- Created: 2024-03-26T20:30:49.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-04-09T16:47:35.000Z (about 1 year ago)
- Last Synced: 2025-04-12T02:05:16.001Z (about 1 year ago)
- Topics: button, component, copy, web, webcomponent
- Language: TypeScript
- Homepage: https://substrate-system.github.io/copy-button/
- Size: 119 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# copy button
[](README.md)
[](./dist/index.d.ts)
[](https://semver.org/)
[](https://packagephobia.com/result?p=@substrate-system/copy-button)
[](LICENSE)
A button to copy some text to the system clipboard, made with webcomponents.
Contents
- [install](#install)
- [demonstration](#demonstration)
- [globals](#globals)
- [use](#use)
* [Example without a build step](#example-without-a-build-step)
* [With a build step](#with-a-build-step)
* [`/copy`](#copy)
- [CSS](#css-1)
* [attributes](#attributes)
* [Screenshots](#screenshots)
## install
```sh
npm i -S @substrate-system/copy-button
```
> [!IMPORTANT]
> Be sure to import `@substrate-system/a11y` too.
## demonstration
See [substrate-system.github.io/copy-button](https://substrate-system.github.io/copy-button/) for an example.
## globals
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.
## use
Include this package, then call `customElements.define` with your preferred tag
name. Be sure to import [`@substrate-system/a11y`](https://github.com/substrate-system/a11y)
too; we use class names exposed there for accessibility.
```js
import { CopyButton } from '@substrate-system/copy-button'
import '@substrate-system/a11y'
import '@substrate-system/copy-button/css'
customElements.define('copy-button', CopyButton)
```
Or call the exported function `register` to use the default tag name, `copy-button`.
```js
import { register } from '@substrate-system/copy-button'
register()
// the web component can be used now
```
### Example without a build step
#### Copy the files
Copy files so they are accessible by your web server.
##### JS
```sh
cp ./node_modules/@substrate-system/copy-button/dist/index.min.js public/copy-button.js
```
##### CSS
```sh
cp ./node_modules/@substrate-system/copy-button/dist/style.min.css public/copy-button.css
```
#### Use in HTML
```html
import { CopyButton } from '/copy-button.js'
customElements.define('copy-button', CopyButton)
```
### With a build step
We expose several import options
```js
// default, unminified
import '@substrate-system/copy-button'
// minified
import '@substrate-system/copy-button/min'
// style
import '@substrate-system/copy-button/css'
// style, minifed
import '@substrate-system/copy-button/css/min'
```
In `vite`, for example, import like this
```js
import '@substrate-system/copy-button'
import '@substrate-system/copy-button/css'
// or minified css
import '@substrate-system//copy-button/css/min'
```
### `/copy`
Import just the copy function, no UI.
```js
import { clipboardCopy } from '@substrate-system/copy-button/copy'
clipboardCopy('hello copies')
```
## CSS
Override the variables `--success-color` and `--copy-color` to customize the color.
```css
.copy-button {
--success-color: green;
--copy-color: blue;
}
```
### attributes
1 required attribute, 1 optional attribute.
#### `payload`
The text you want to copy.
```html
```
#### `duration`
Length of time in milliseconds that the success checkmark should show.
Default is `2000` (2 seconds).
```html
```
--------------------------------------------------------
### Screenshots
Create a button like this
-------
