Data display

Copy button

Copies a value, such as a link or an API key, and confirms it.

import { CopyButton } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Copy a link

registry.jsonresume.org/thomasdavis

copy-button/link.tsx

import { CopyButton, Stack, Text } from '@jsonresume/ui';

export default function CopyButtonLink() {
  return (
    <Stack direction="row" gap={3} align="center" wrap>
      <Text>registry.jsonresume.org/thomasdavis</Text>
      <CopyButton
        value="https://registry.jsonresume.org/thomasdavis"
        label="Copy link"
        size="sm"
      />
    </Stack>
  );
}

Accessibility

The confirmation is announced through a polite live region.

Props

Also accepts the attributes of the element CopyButton renders.
Prop	Type	Default	Description
value required	string	–	Text to copy.
announcement	string	Copied to clipboard	Spoken confirmation.
asChild	boolean	–	Render the single child (e.g. a link) with button styles instead of a <button>. `loading` is not available in this mode.
copiedLabel	string	Copied
fullWidth	boolean	–	Style variant.
label	string	Copy
loading	boolean	–	Shows a spinner, keeps the button's width, and disables it.
size	iconsmmdlg	–	Style variant.
variant	linkprimaryinkdangersecondaryghost	–	Style variant.