Copies a piece of text, and says that it did.
Import it from rei-kit:
import { CopyButton } from 'rei-kit'
Open CopyButton in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { CopyButton } from 'rei-kit'
</script>
<template>
<CopyButton
text="pnpm add rei-kit"
copy-label="Copy the command"
copied-label="Copied"
error-label="Could not copy"
with-text
/>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
text | string | yes | What lands on the clipboard. |
copyLabel | string | yes | The button's name at rest, e.g. "Copy the key". |
copiedLabel | string | yes | Its name for the two seconds after, e.g. "Copied". |
errorLabel | string | undefined | Said when the browser refuses. Unset, a refusal only leaves it unchanged. |
withText | boolean | false | Show the label beside the icon, rather than only to assistive tech. |
variant | 'default' | 'unstyled' | 'default' | `unstyled` keeps the copying and drops the surface and the icon. The announcement is the part that is laborious and the part that is dropped: a copy button that says nothing leaves somebody who cannot see the tick pressing it twice. Three places on this kit's own site wrote their own copy button to get a different shape — a pill in a code block's bar, a whole install command — and all three lost the announcement on the way. That is the gap this closes: the behaviour without the paint, the same answer `BaseButton` and `BaseInput` give. Unstyled brings no focus ring either, so give it one. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.