Copy button
Copies text and answers with a tick, or a cross if the browser refused, then turns back. It never changes size.
npm i github:ziyam-khan/runetsFeatures
- Copy, tick and cross stacked in one cell and swapped in CSS, so the button never resizes.
- The text can be a function, read at the moment of copying.
- A polite status says Copied or Copy failed.
Use it for
- Email addresses, links, code blocks.
On this site
- Home: the emailCopy the address in one press.
- My Components: every code blockTake the code.
Installation
- Get runets.
git clone https://github.com/ziyam-khan/runets - Copy these files into your project, keeping their folders.
- Install what they use.
pnpm add react lucide-react - Load the styles once. Bring your own base tokens, or use runets’ default theme.
import 'runets/styles/theme.css' import 'runets/styles/kit.css'
API
| Prop | Type | What it does |
|---|---|---|
text | string | () => string | What to copy. |
label | string | The accessible name (Copy). |
onCopied / onFailed | functions | Tell the rest of the page. |
reset | number | ms before it turns back (1500). |
Accessibility
- A labelled button; the result is announced through a status region.
Source
The code is in src/kit/copy-button.tsx in runets, MIT licensed.