Actions

Copy button

Copy to clipboard, with a transient confirmation.

Client componentSource

Import

import { CopyButton } from '@the_viveksingh/vivek-ui'

Copy to clipboard

The state change is announced to assistive technology, not only shown, and it reverts after timeout. A failed write reports the error label rather than lying about success.

<CopyButton
  value="npm i @the_viveksingh/vivek-ui"
  label="Copy install command"
  copiedLabel="Copied"
/>

Variants

It forwards variant and size straight to Button, so it matches its neighbours.

<CopyButton value="npm i @the_viveksingh/vivek-ui" />
<CopyButton value="pnpm add @the_viveksingh/vivek-ui" variant="outline" />
<CopyButton value="yarn add @the_viveksingh/vivek-ui" variant="ghost" size="sm" />

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for CopyButton
PropTypeDefaultDescription
value requiredstring—The text put on the clipboard.
labelReactNode—Resting label. Defaults to `'Copy'`.
copiedLabelReactNode—Label while the transient state lasts. Defaults to `'Copied'`.
errorLabelReactNode—Label when the copy could not happen. Defaults to `'Copy failed'`.
timeoutnumber—Milliseconds before returning to the resting label. Defaults to `2000`.
variantButtonProps['variant']——
sizeButtonProps['size']——
onCopy(value: string) => void——
onCopyError() => void——
copiedAnnouncementstring—Announced on success. Defaults to `copiedLabel` when it is a string, else `'Copied'`.
errorAnnouncementstring—Announced on failure. Defaults to `errorLabel` when it is a string, else `'Copy failed'`.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering